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.

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.

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.


This content was originally published by the author at

Get your project started today

Get in Touch