Weigh CSS selectors

Closer to two o'clock in the night, no less than eternal questions come to my head in a place with thoughts of the eternal - “what is the meaning of life?”, “Why should a person sleep at all?” Or “What the hell #% ^ $ doesn't work?” morning, the more the last question begins to worry.

Below, I will talk about what the hell sss selectors sometimes do not behave as it seems to us right, and how they really should behave.

Head one - go right!

The selectors are weighed to find out which style will be applied when several selectors somehow point to the same element, and try to change the same style of it. Whoever weighs more and styles, and the laws of weighing are a thousand times simpler than those that seem purely empirical.
')
So, we weigh - at first we will present couple of rows from 8 numbers:

0,1,0,0,0,0,0,0

 1,0,0,0,0,0,0,0

Meet - some two selectors look like this in the numbers so that no one will guess what I call them conditionally “upper” and “lower”

To find out which one is harder, you need to perform the following steps and do not confuse anything:

We look at the extreme left numbers
Choose from them more. - this particular selector will be the hardest
If the numbers are the same, move the number to the right and repeat the instructions from paragraph 2.
If all numbers are the same, then styles are applied from the selector that was last declared.

The worst secret

If you read this, peace of mind will forever disappear from you, but at least you can sleep at night.

Revealing the most terrible secret, I will tell you how to actually turn an ordinary selector into such clear and beautiful figures? Everything is very simple as always:

Tags for each tag in the selector, you can add one to the rightmost number:
```
 a –  0,0,0,0,0,0,0,1 div a –  0,0,0,0,0,0,0,2 
```
Classes , for each class or pseudo-class in the selector, you can throw one by one in the second number to the right
```
 .head .logo –  0,0,0,0,0,0,2,0 .logo.big – 0,0,0,0,0,0,2,0 div:first-child – 0,0,0,0,0,0,1,1 .logog > .big –    0,0,0,0,0,0,2,0 
```
Yes, you understood correctly. Css selector wanted to spit on all your delights such as spaces or ">".
For each ID in the selector, add one by one to the third number to the right.
```
 #head –  0,0,0,0,0,1,0,0 #head #logo –  0,0,0,0,0,2,0,0 
```

I think you got the gist, now you can start a small quiz to check it:

Quiz

 <head> <title></title> <style> span p { background-color: gray; } html p { background-color: red; } </style> </head> <body> <div> <span><p>?</p></span> </div> </body>

Question: What is the background color in the paragraph?
Answer: That's right, red, because the selector doesn’t care what it seems to you, and the distance between the tags does not interest him. And since the tag weight is equal, the last one will be applied.

 <head> <title></title> <style> div.test1 { background-color: gray; } div > .test1 { background-color: yellow; } div .test1 { background-color: red } </style> </head> <body> <div> <div class='test1'>?</div> </div> </body>

Question: What color will the background be in our diva?
Answer: That's right, red, because when measuring weight, you still deeply put a space between classes there, a larger sign, or you wrote them closely. The weight of all these selectors is the same, which means that the latter will apply.

 <head> <title></title> <style> #id1 div { background-color: gray; } #id2 { background-color: red } </style> </head> <body> <div id="id1"> <div id="id2">?</div> </div> </body>

Question: It's the same.
Answer: And the answer, for a change, is different: our div will be gray. Because as I mentioned above, the selector is absolutely indifferent to what you had in mind. The first selector has more weight, and nobody cares what most likely you expected not for this behavior.

We continue to reveal secrets

We still have so many numbers left, and surely we want to know what they all mean - we continue to reveal secrets.

The selector * is absolutely weightless, that is, completely.
Attribute selector is the most common pseudo-class and it weighs as much as normal classes.
Any inline style written in the style = ”attribute of the element automatically takes priority 0,0,0,0,1,0,0,0 , which immediately makes it very cool.

And the next four numbers are all our old friends only with the ! Important attribute .

 div { background-color: gray !important; }      background-color - 0,0,0,1,0,0,0,0 .header { background-color: gray !important; } 0,0,1,0,0,0,0,0

We all love quizzes

 <head> <title></title> <style> a.class1 { color: blue; } a[href="#"] { color: green; } a[href^="#"] { color: red; } </style> </head> <body> <a class="class1" href="#">?</a> </div> </body>

Question: What is the color of the question mark in the link?
Answer: Red, it does not matter that the selector for the exact match of the attribute looks more specific than the selector that selects everything that “begins with”. Weight they have the same.

 <head> <title></title> <style> #id1 { background-color: gray !important; } </style> </head> <body> <div id="id1" style="background-color: red;">?</div> </body>

Question: My original patented question.
Answer :! Important is the coolest, even cooler than the inline styles - so bam-bam-bam - gray!

The sources of all tests are here.

PS some porn

 <head> <title></title> <style> #id1 { background-color: gray !important; } </style> </head> <body> <div id="id1" style="background-color: red !important;">red</div> </body>

Source: https://habr.com/ru/post/137588/

All Articles