Example 🌰

UL OL LI.red{... }Copy the code

/ * A = 0, b = 1, c = 3 * /

Selector priority definition

Ordinary selector

To check

A selector’s calculated for A given element as follows:

  • count the number of ID selectors in the selector (= A)
  • count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= B)
  • count the number of type selectors and pseudo-elements in the selector (= C)
  • ignore the universal selector

Specificities are compared by comparing the three components in order: the specificity with a larger A value is more specific; if the two A values are tied, then the specificity with a larger B value is more specific; if the two B values are also tied, then the specificity with a larger C value is more specific; if all the values are tied, the two specificities are equal.

Due to storage limitations, implementations may have limitations on the size of A, B, or C. If so, values higher than the limit must be clamped to that limit, and not overflow.

This is the definition in the selector standard. The general meaning is:

Classify selectors into the following categories

  • Number of ID selectors = A
  • Number of class selectors, attribute selectors, and pseudo classes = B
  • Number of pseudo-element selectors and label selectors = C
  • Ignore the universal selector (note: there is relationship between selector: +, >, ~, ‘ ‘, | |, etc.)

The specificity was compared by comparing the three components in order: the greater the A value, the more specific the specificity; If the two A values are juxtaposed, the greater the B value, the more specific the specificity. If the two B values are also bound together, the greater the C value, the more specific it is. If all values are bound together, the two specificities are equal.

Implementations may limit the size of A, B, or C due to storage limitations. If so, values above the limit must be kept within that limit and not overrun.

Calculation method

The procedure for achieving the above priority is to take as large A value as possible, N, and multiply ABC: S = A * N^2 + B * N^1 + C.

Interesting history

There is a bug in Internet Explorer that sets N to 255 to save memory, resulting in 256 classes equal to one ID. However, such errors should no longer exist in modern browsers.

Pseudo class selector

  • The specificity of an :is(), :not(), or :has() pseudo-class is replaced by the specificity of the most specific complex selector in its selector list argument.
  • Analogously, the specificity of an :nth-child() or :nth-last-child() selector is the specificity of the pseudo class itself (counting as one pseudo-class selector) plus the specificity of the most specific complex selector in its selector list argument (if any).
  • The specificity of a :where() pseudo-class is replaced by zero.

  • :is(), :not(), or :has() in addition to the outside selector, if () also has a selector inside, then the base selector is calculated with the highest priority

  • :nth-child() or: nth-last-Child () computes the value of the selector and the value of the pseudo-class B.

  • :where() does not count the priority at all, only the priority of the selector before:

example

To get a sense of priorities, here are some examples:

*                                  /* a=0 b=0 c=0 */
LI                                 /* a=0 b=0 c=1 */
UL LI                              /* a=0 b=0 c=2 */
UL OL+LI                           /* a=0 b=0 c=3 */
H1 + *[REL=up]                     /* a=0 b=1 c=1 */
UL OL LI.red                       /* a=0 b=1 c=3 */
LI.red.level                       /* a=0 b=2 c=1 */
#x34y                              /* a=1 b=0 c=0 */
#s12:not(FOO)                      /* a=1 b=0 c=1 */
.foo :is(.bar.#baz)               /* a=1 b=1 c=0 */
:is(em.#foo)                       /* a=1 b=0 c=0 */
.qux:where(em.#foo#bar#baz)        /* a=0 b=1 c=0 */
:nth-child(even of li..item)      /* a=0 b=2 c=0 */
:not(em.strong#foo)               /* a=1 b=0 c=1 */
Copy the code

Note that the priority above is only in the style tag, not counting inline styles and! Important, but! Important has the highest priority, followed by inline styles. Example:

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Inline styles and! important</title>
  <style>
    div {
        width: 100px;
        height: 100px;
        background-color: red! important;
    }
  </style>
</head>
<body>
  <div style="background-color: green;"></div> <! The final div is red -->
</body>
</html>
Copy the code

conclusion

Personally, if most of the style of a website depends on priority, THEN I think the website may need to be rebuilt, not suitable for modification. The priority of the selector seems to me to be used only when tweaking the details, but I’ve only understood it so far, and it’s probably the domain of people who write browsers or senior engineers or architects.

If there are any shortcomings or mistakes, readers are welcome to comment and leave a message

Of course, if this article is of any help to you, please like and retweet it. Thank you 🙏

reference

Calculating a selector ‘s specificity