CSS (Cascading Style Sheets) — каскадные таблицы стилей.
CSS — это язык представления внешнего вида документа, написанного с использованием языка разметки.

CSS selector's specificity

Katti » 27 дек 2018, 20:55

Hi everyone! I am almost noob in CSS :( But want to share with all of you with very important conception in CSS: selector's specificity (weight).


Calculating a selector's specificity

A selector's specificity is calculated as follows:

  1. count the number of ID selectors in the selector (= a)
  2. count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
  3. count the number of type selectors and pseudo-elements in the selector (= c)
  4. ignore the universal selector

Selectors inside the negation pseudo-class are counted like any other, but the negation itself does not count as a pseudo-class.

Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

Examples:

* → /* a=0 b=0 c=0 -> specificity = 0 */
LI → /* a=0 b=0 c=1 -> specificity = 1 */
UL LI → /* a=0 b=0 c=2 -> specificity = 2 */
UL OL+LI → /* a=0 b=0 c=3 -> specificity = 3 */
H1 + *[REL=up] → /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red → /* a=0 b=1 c=3 -> specificity = 13 */
LI.red.level → /* a=0 b=2 c=1 -> specificity = 21 */
#x34y → /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO) → /* a=1 b=0 c=1 -> specificity = 101 */

Very important to note


Example:
#id1 p -> specificity = 1,0,1 or 101
Vs
.class1 .class1 .class1 .class1 .class1 .class1 .class1 .class1 .class1 .class1 .class1 .class1 p -> specificity = 0,12,1 or 0121
(12 .class1)

The «#id1 p» is winner!

You can generally read the values as if they were just a number, like 1,0,0,0 is "1000", and so clearly wins over a specificity of 0,1,0,0 or "100". The commas are here to remind us that this isn't really a "base 10" system, in that you could technically have a specificity value of like 0,0,12,1 - and that "12" doesn't spill over like a base 10 system would.

You can never beat one Id by any number of classes!
Katti
 
Сообщения: 9
Зарегистрирован: 12 окт 2015, 10:55

Вернуться в CSS