How do masters write selectors that others can’t understand

The title of this article is that others can’t understand, but the original intention is not to write such a complicated choice. Some complicated (weird) selectors may have magical effects in some specific scenarios, or write This kind of selector is based on the special background at the time.

Through these cases, we have a glimpse of some interesting aspects of CSS selectors. Gain some useful experience from it.

Variety of pseudo-class overlays

First look at the first category, in a single selector, superimposed on various pseudo-elements.

Like this:

a:not(main *:not(:is(h2, h3) > *)) {
  color: red;
}

This selector doesn't really look at it for a minute and doesn't know what it is. (If you look carefully, you don’t necessarily know...)

It mixes two relatively new pseudo-class selectors

• :not() : used to match elements that do not match a set of selectors. Since its function is to prevent specific elements from being selected, it is also called a negation pseudo-class.
• :is() : Take the selector list as a parameter, and select any element that can be selected by any selector in the list.

Of course, for its dismantling:

1. a:not(main *) : select all a tags <main>
2. main *:not(:is(h2, h3) > *) : Select <main> tag that are not <h2> , <h3> sub-elements

<main> is: select all 0613ac339ecf8c tags that are <a> tag and all <main> tags that are not <h3> <h2> , and the sub- <a> <a> .

Suppose there is the following HTML

<main>
    <a href="">main>a</a>
    <h1><a href="">main>h1>a</a></h1>
    <h2><a href="">main>h2>a</a></h2>
    <h2><p><a href="">main>h2>p>a</a></p></h2>
    <h3><a href="">main>h3>a</a></h3>
</main>
<h1><a href="">h1>a</a></h1>
<h2><a href="">h2>a</a></h2>
<h3><a href="">h3>a</a></h3>
<a href="">a</a>

The results are as follows:

For this CSS selector, it can be restored by normal writing, but the amount of code is a little bit more. Normally, it is not recommended to write such a complicated selector.

This is just an example, multiple layers of different pseudo-class nesting are disastrous for code readability.

Magical special characters

Well, one day you came across such a selector:

#\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\?\>\<\\\[\]\{\}\|\`\# {
    color: red;
}

Oh My God. I think your first reaction must be that this selector really works?

Sorry, it really works. CSS class names in CSS allow any characters NUL

If you are interested, you can check this out: Which characters are valid in CSS class names/selectors?

Therefore, the above selector can match such tags:

<div id="~!@$%^&*()_+-=,./';:?><\[]{}|`#">Lorem</div>

Of course, in this case, we can also write such a selector:

<div id="💉💧🐂🍺">真滴牛啤</div>

#💉💧🐂🍺 {
    padding: 10px;
    color: red;
}

emmm, yes, this is also valid:

Therefore, it is not particularly rough and thick, and it is highly recommended not to - special characters other than 0613ac339ed123 and _

Multiple overlaps of itself

The following selector is also a bit interesting, but you can write about it at special moments. A selector like this:

div.g-text-color.g-text-color.g-text-color.g-text-color.g-text-color {
    color: red;
}

Why is there such a selector? In most cases, it is to increase the priority.

We all know that there are priorities between different CSS selectors.

For example, there is such a scenario. Sometimes, we introduce a component library into our business and use one of its buttons, but we want to change some of the styles. I added a class name to it, and found that it did not take effect after the corresponding class name was added with an overlay style.

reason for 1613ac339ed217 is that the priority of the selector defining the style is not high enough for .

At this time, we can increase the weight of the selector by superimposing ourselves.

div.g-text-color.g-text-color.g-text-color weights will be higher than div.g-text-color.g-text-color higher. So in some extreme cases, the above-mentioned selector appears.

Of course, under normal circumstances, it is not recommended to write such a heady choice.

in conclusion

There are still many deceptive selectors, and this article is just the tip of the iceberg. From that others can't understand, we can know that there are many details about CSS selectors. Knowing the bad ones can help us better write beautiful and correct selectors.

Okay, this concludes this article, I hope it helps you :)

Want to get the most interesting CSS information, don’t miss my public - 1613ac339ed2ec iCSS front-end interesting 1613ac339ed2ee 😄

For more exciting CSS effects, please follow my CSS inspiration

More wonderful CSS technical articles are summarized in my Github - iCSS , which is continuously updated, welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can exchange more, original articles, limited writing style, and lack of knowledge. If there are any irregularities in the article, please let me know.