CSS3: Introduction to the Use of default Pseudo-Class Selector


1. CSS3: Introduction to default pseudo-Class selector

CSS3: The default pseudo-Class selector only works on form elements, which represent the default state.

For example, a drop-down box may have multiple options. By default, we will make a < option > in the selected state. At this time, the < option > can be regarded as a form element in the default state (for example, “option 4” in the following schematic code). In theory, it can be applied: default pseudo class selector.

<select multiple>
    < option > option 1 </option >
    < option > option 2 </option >
    < option > option 3 </option >
    < option selected > option 4 </option >
    < option > option 5 </option >
    < option > option 6 </option >

Suppose CSS is as follows:

option:default {
    color: red;

In Chrome, when we select other options, we can see that option 4 is red. The effect is as follows:


Firefox browsers also have similar effects:


IE browsers do not support it.

Therefore, the mobile end can be used safely, and the desktop end can also be used regardless of IE projects.

2. CSS3: The role of default pseudo-Class selector

CSS3: The function of default pseudo-Class selector is designed to let users know what default options are when they select a set of data. Otherwise, if they choose more than one option, they will not know which default provides, which is an experience enhancement strategy. It’s not very powerful, but it’s useful at critical moments.

3. Research on some characteristics of CSS3: default pseudo-Class selector

1. Research 1: Will JS rapid modification have an impact?

The test code is as follows:

:default {
  transform: sclae(1.5);
<input type="radio" name="city" value="0">
<input type="radio" name="city" value="1" checked>
<input type="radio" name="city" value="2">
document.querySelectorAll('[type="radio"]')[2].checked = true;

That is to say, HTML set the second radio box to enlarge 1.5 times, JS immediately set the third radio box to select, and found that even if the JS modification is almost without delay, the rendering of default pseudo-Class selector is still unaffected.


Therefore, the answer to this question is no effect.

2. Study 2: <option> If the selected attribute is not set, the browser will default to the first <option> when the first <option> response: default pseudo-Class selector?

For example:

option:default {
    color: red;
<select name="city">
    <option value="-1">Please select </option>
    < option value = "1" > Beijing < / option >
    <option value="2">Shanghai</option>
    <option value="3">Shenzhen</option>
    <option value="4">Guangzhou</option>
    <option value="5">Xiamen</option>

As a result, the first < option > has no red color, as shown in the following figure. Therefore, if the default selector is to work, it must be selected as true. Similarly, for single checkboxes, the checked value should be true.

Therefore, the answer to this question is not to respond.

CSS3: practical application of default pseudo class selector

Although: default selector is used to mark the default state to avoid confusion. But in fact, in my opinion, the more practical value should be the “recommendation mark”.

Modern web applications are becoming more and more intelligent. Sometimes some operations will give users some choices to push. By default, the recommended settings are set to checked state. In the past, our practice was to output additional text “(recommendation)”. Now we have default selector, our implementation can become more concise and easier to maintain.

You can click here: default selector and Auto-add recommendation demo

The effect is as follows:


Click on the other options and the word “recommendation” is still solid. Later, if you want to change the recommendation options, you can directly modify the checked attribute of input, which makes maintenance easier.

The relevant CSS and HTML codes are as follows:

input:default + label::after {
<p> <input type="radio" name="pay" id="pay0">label for="pay0">Alipay</label></p>
<p> <input type="radio" name="pay" id="pay1" checked> <label for="pay1"> Wechat</label>.</p>
<p> <input type="radio" name="pay" id="pay2">label for="pay2">bank card</label></p>


The above is a brief introduction to the use of CSS3: default pseudo-Class selector introduced by Xiaobian. I hope it will be helpful to you. If you have any questions, please leave me a message and Xiaobian will reply to you in time. Thank you very much for your support to developpaer.