Специфичность

Не достаточно знать только принципы наследования и каскадирования для того чтобы применить стиль к какому либо элементу на странице. Нужно понимать и знать ещё один важный принцип CSS — специфичность.

К элементу можно обратиться по разному, приведём пару фрагментов кода:

Очевидно, что к элементу в обоих случаях применится только одно правило, весь вопрос в том — какое?
Вот тут-то и необходимо иметь представление о специфичности.

У каждого селектора есть своя степень специфичности. Стиль применится к тому элементу, правило которого имеет наибольшую специфичность селекторов.

Как узнать у каких селекторов какая специфичность?

Придумали такую схему: разделять селекторы по четырём гпуппам 0, 0, 0, 0, затем высчитывать колличество селекторов в каждой группе и на основании этого узнавать степень специфичности.

Приведём список в котором разделим селекторы по четырём группам:

  1. В первую группу относится селектор встроенных стилей <h1 style="color: green;"> — это самый специфичный тип селектора, он относится к первой группе: 1, 0, 0, 0
  2. Селектор идентификатора #id — этот тип селектора относится ко второй группе; один бал каждого типа такого селектора добавляется во вторую группу: 0, 1, 0, 0
  3. Селектор класса .class, селектор псевдокласса :pseudoclass, селектор с атрибутом p[attr] — эти типы селекторов относится к третьей группе; один бал каждого типа такого селектора добавляется в третью группу: 0, 0, 1, 0
  4. Селекторы элемента p, селекторы псевдоэлемента ::pseudoelement — эти типы селекторов относятся к четвёртой группе; один бал каждого типа такого селектора добавляется в четвертую группу: 0, 0, 0, 1

Универсальный селектор *, комбинаторы >, +, ~, не имеют специфичности поэтому они не учитываются.

Вернёмся к предыдущим фрагментам кода и посчитаем специфичность:

Нужно обратить внимание что первым делом смотрят на группу, если в одном правиле 0, 0, 99, 101, а во втором 0, 1, 0, 0, то выигрывает второе правило, потому как селектор идентификатора, который относится ко второй группе, более специфичный.

А если в одном правиле 0, 1, 99, 101, а во втором 0, 2, 0, 0, то выигрывает опять второе, так как во втором большее колличество селекторов идентификатора.

Степень специфичности селекторов растёт слева направо !

Поделиться