Thank you all for supporting me and Digg all the time. Leave a comment below and send a gift

The title of this article is how to write confusing selectors, but the intention is not to write such complex choices. Some complex (weird) selectors may be useful in certain situations, or they may be written for the specific context of the time.

Through these examples, we glimpsed some of the interesting aspects of CSS selectors. Some useful experience has been gained from it.

Multifarious pseudo-class overlay

Let’s start with the first class, where we stack various pseudo-elements in a single selector.

Like this one:

a:not(main *:not(:is(h2.h3) > *)) {
  color: red;
}
Copy the code

You don’t know what this selector is until you look at it for a minute. (If you look carefully, you may not know…)

It is mixed with two relatively new pseudo-class selectors

  • :not(): The element used to match the mismatch group selector. Because it prevents certain elements from being selected, it is also called a negation pseudo-class.
  • :is(): takes a list of selectors as arguments and selects elements that can be selected by any of the selectors in the list.

And, of course, for its disassembly:

  1. a:not(main *): Choose not to<main>All a tags under the tag
  2. main *:not(:is(h2, h3) > *): choose<main>All under the tag is not<h2>,<h3>The element of the child element

So it all adds up to this: select all tags that are not under the


tag and all
tags that are not under < H2 >, < H3 >.

Suppose you have 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>
Copy the code

The results are as follows:

For this CSS selector, it can be restored by normal writing, but a little bit more code, normally, it is not recommended to write such a complex selector.

This is just one example of how nesting multiple layers of different pseudo-classes can be disastrous for code readability.

Magical special characters

Well, one day you come across a selector like this:

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

Oh My God. I think your first reaction is that this selector really works, right?

Sorry, it does work. CSS class names in CSS allow any character except NUL.

Which characters are valid in CSS class names/selectors?

So, the selector above can match tags like this:

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

Of course, in this case, we can also write selectors like this:

<div id="💉 💧 🐂 🍺">True cow bei</div>
Copy the code
# 💉 💧 🐂 🍺 {padding: 10px;
    color: red;
}
Copy the code

Emmm, yes, this also works:

Therefore, it is not particularly rude to include special characters other than – and _ in CSS class names.

Multiple overlaps of itself

The following selector, also a little interesting, special moments can be written. A selector like this:

div.g-text-color.g-text-color.g-text-color.g-text-color.g-text-color {
    color: red;
}
Copy the code

Why does this selector exist? Most of the time it’s about prioritizing.

We all know that CSS selectors have different priorities.

For example, sometimes we introduce a component library in our business, use one of its buttons, and then want to change some of the styles. It added a class name, in the corresponding class name after the new overwrite style found that did not take effect.

The reason is that the selector that defines the style is not a high enough priority.

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

The weight of div.g-text-color.g-text-color.g-text-color is higher than that of div.g-text-color.g-text-color. So, in some extreme cases, you have the selector described above.

Of course, under normal circumstances, it’s not recommended to write such a head-pounding choice.

To summarize

There are many other bad selectors out there, but this article is just the tip of the iceberg. CSS selectors go into a lot of detail from how to write unreadable selectors. Knowing the bad ones helps us write beautiful and correct selectors.

Well, the end of this article, I hope to help you 🙂

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.

Send nuggets around

Thank you for your support to me and the Nuggets until September 10th:

  1. Leave a comment in the comment section below, and get the top 6 with the highest popularity in the comment section (number of comments + number of comprehensive data), and send a gold nuggets badge or a Gold nuggets IPT shirt at random
  2. In addition, I will give you a QQ hand-made blind box as an extra gift for the friend with the most likes