The Default Pseudo Class

When you think of a :default css selector, what HTML elements come to mind?

input type="checkbox"

Radio & Checkbox Inputs

With radio and checkbox inputs, any element that has the <inlinecode>checked<inlinecode> attribute on page load will have the <inlinecode>input:default<inlinecode> styling applied to them. In the example below, the choices "Blue" and "Morning" are the default values. The default styling on these elements persists throughout interactions with the inputs.

https://codepen.io/codylewis/pen/oVLxEX

Default Form Button

Default form buttons are new to me and they are one of those "oh that's neat" features. The first button element within a <inlinecode><form><inlinecode> tag will be the default and styling from <inlinecode>button:default<inlinecode> will apply to it.

https://codepen.io/codylewis/pen/moEPye

When Do I Use It?

When I was learning about the :default pseudo class, I found the selector to be intriguing. Unfortunately, I haven't been able to find a use for it.

Resources

This content was originally published by the author at https://codylewis.net/posts/2019/03/the-default-pseudo-class/

Get your project started today

Get in Touch