Exploring the :default Pseudo-Class in CSS

Default

The :default pseudo-class matches the default element in a group of associated elements, such as the radio button in a group of buttons that are selected by default, even if the user has selected a different value.

Syntax

:default {
  css declarations;
}

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Input pseudo-classes</title>
    <style>
      input:default + label {
        color: brown;
      }
      option:default {
        color: green;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h3>Input pseudo-classes</h3>
    <p>:default</p>

    <input type="checkbox" id="c" checked />
    <label for="c">C Program</label>
    <br />

    <input type="checkbox" id="cpp" />
    <label for="cpp">C++</label>
    <br />

    <input type="checkbox" id="java" />
    <label for="java">Java</label>
    <br />

    <hr />
    <input type="radio" id="male" checked name="gender" />
    <label for="male">Male</label>
    <br />
    <input type="radio" id="female" name="gender" />
    <label for="female">Female</label>
    <br />
    <hr />
    <label for="course">Course Name</label>
    <select id="course">
      <option value="">Select Value</option>
      <option value="c">C</option>
      <option value="cpp" selected>C++</option>
      <option value="java">Java</option>
    </select>
  </body>
</html>

Live Preview

The provided CSS code is used to style HTML <input> elements and <option> elements based on their default state. It applies different styles to these elements when they are considered "default."

input:default + label: This selector targets <label> elements that are immediately adjacent (sibling) to <input> elements when those input elements are in their default state.

input:default: This part of the selector targets <input> elements that are in their default state. In HTML, an <input> element can be in its default state when the form is initially loaded or when the user has not interacted with it.
+ label: This part of the selector selects adjacent <label> elements that immediately follow the default <input> elements.
color: brown;: This style declaration sets the text color of the adjacent <label> elements to brown when the associated <input> elements are in their default state. This change in text color provides a visual indication that the input and label are associated.

option:default: This selector targets <option> elements within a <select> element when those options are in their default state.

option:default: This part of the selector targets <option> elements that are in their default state. In a dropdown menu created with <select> and <option> elements, an option may be in its default state when the menu is initially loaded, and no specific option has been selected.
color: green;: This style declaration sets the text color of default <option> elements to green.
font-weight: bold;: This style declaration sets the font weight (text thickness) of default <option> elements to bold.

It's important to note that the concept of a "default" state for <input> elements and <option> elements is context-specific and may depend on user interactions or the initial state of the form. The styles applied in this code help differentiate these elements when they are in their default states from when they are in other states.