CSS selectors commonly used are the following: the descendant selector space (), the child selector arrow (>), the adjacent brother selector plus (+), and the brother selector tilde (~). This article mainly introduces their differences and functions.

Descendant selector

Descendant selectors () are the most commonly used selectors in front-end development and have been supported since IE6, but do we really know what they do? Let’s take a look at the following example

<style>
    .red { color: red; }
    .blue { color: blue; }
</style>
<div class="red">
    <div class="blue">
        <p>1. Text Text text</p>
    </div>
</div>

<div class="blue">
    <div class="red">
        <p>2. Text Text text</p>
    </div>
</div>
Copy the code

The first paragraph will show blue, and the second paragraph will show red. Since color is inherited, the text color will be determined by the darkest element. The result will look like this:

Take a look at the following example and change the style a little

<style>
    .red p{ color: red; }
    .blue p{ color: blue; }
</style>
<div class="red">
    <div class="blue">
        <p>1. Text Text text</p>
    </div>
</div>

<div class="blue">
    <div class="red">
        <p>2. Text Text text</p>
    </div>
</div>
Copy the code

The answer is blue and red, but the correct answer is both blue, as shown in the following picture:

I could be barking up the wrong tree reason mainly is the understanding of descendant selectors are not clear, if contain descendant selectors, so the priority that the selector DOM hierarchy has nothing to do with the ancestor element, but rather to see whether the element of priority landing, the example above, the ground element is < p >, < p > two elements separated from each other, no nested, So their DOM hierarchy is parallel; Red p and blue p are a class selector (value 10) and a label selector (value 1), which have the same value; Look at their position in the CSS, and follow the rule of “coming from behind”, because.blue p is the last, so the final result is that both of them are blue.

The child selector

Subselectors (>) are also commonly used in front-end development and have been supported since IE7.

  • The difference between child and descendant selectors

    The child selector matches only the first generation of children, the outermost element of the following children, while the descendant selector matches all children, such as in this example

<style>
    ol li { color: red; text-decoration: underline; }
    ol > li { color: blue; text-decoration: underline wavy; }
</style>
<ol>
    <li>Text text</li>
    <li>Text text<ul>
            <li>2.1 Text Text text</li>
            <li>2.1 Text Text text</li>
        </ul>
    </li>
    <li>Text text</li>
</ol>
Copy the code

Since the parent and child elements have different text-decoration, we can accurately determine the scope of the different selectors based on the underline type, as shown in the figure below

You can see that the outermost elements are all wavy lines, while the inner elements have both wavy lines and straight lines. The wavy lines are produced by ol > li, and the straight lines are produced by OL Li, which means that OL > Li only acts on the outermost subelements, while OL Li acts on all the descendants.

This is the difference between the two selectors. You can see that the descendant selector () has a wider range than the child selector (>), so the child selector matches the same selector better than the descendant selector.

  • Suitable for scenarios with subselectors

    The main purpose of using sub-selectors is to avoid conflicts and to prevent other elements from being affected. By limiting the structure with sub-selectors, it makes the structure more stable, but at the same time it loses elasticity and variation, which may be affected if the structure needs to be modified later.

Adjacent brother selector

The adjacent sibling selector (+), supported by IE7 and above, is used to select the next adjacent sibling element, as shown in the following example

<style>
    .txt + p {
        color: red;
    }
</style>
<div>
    <p>1. Text Text</p>
    <p class="txt">2. Text Text</p>
    <p>3. Text Text</p>
    <p>4. Text Text</p>
</div>
Copy the code

The results are shown in the figure below:

The next

after.txt turns red. This is where the next brother selector comes in.

We can use adjacent sibling selectors to achieve some effects, such as implementing the effect of :first-child. First-child is also a pseudo-class that is often used to match the first element under a selector, usually in the first row of some list to do something special, But it has a limitation, like if the element that matches is not the first one in the container, that’s not a problem if you use the neighboring sibling selector because it always matches the next neighboring sibling, the first one is never going to match.

Then the brother selector

The subsequent sibling selector (~) is also supported in IE7 and above. It is different from the adjacent sibling selector in that the subsequent sibling selector matches all subsequent sibling elements, not just the first. See the following example:

<style>
    .txt ~ p {
        color: red;
    }
</style>
<div>
    <p>1. Text Text</p>
    <p class="txt">2. Text Text</p>
    <p>3. Text Text</p>
    <p>4. Text Text</p>
</div>
Copy the code

The results are shown in the figure below:

You can see that the subsequent sibling selector matches a wider range than the neighboring sibling selector.

conclusion

Selectors are often used in front-end development, and by understanding their functions and features we can better apply them to our projects.

The resources

  • The WORLD of CSS Selectors. By Xinxu Zhang