CSS Specificity

If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will «win», and its style declaration will be applied to that HTML element.

Think of specificity as a score/rank that determines which style declaration is ultimately applied to an element.

Look at the following examples:

Example 1

In this example, we have used the «p» element as selector, and specified a red color for this element. The text will be red:

Example 2

In this example, we have added a class selector (named «test»), and specified a green color for this class. The text will now be green (even though we have specified a red color for the element selector «p»). This is because the class selector is given higher priority:

Example 3

In this example, we have added the id selector (named «demo»). The text will now be blue, because the id selector is given higher priority:

Example 4

In this example, we have added an inline style for the «p» element. The text will now be pink, because the inline style is given the highest priority:

Specificity Hierarchy

Every CSS selector has its place in the specificity hierarchy.

There are four categories which define the specificity level of a selector:

1. Inline styles — Example:
2. IDs — Example: #navbar
3. Classes, pseudo-classes, attribute selectors — Example: .test, :hover, [href]
4. Elements and pseudo-elements — Example: h1, ::before

How to Calculate Specificity?

Memorize how to calculate specificity!

Start at 0, add 100 for each ID value, add 10 for each class value (or pseudo-class or attribute selector), add 1 for each element selector or pseudo-element.

Note: Inline style gets a specificity value of 1000, and is always given the highest priority!

Note 2: There is one exception to this rule: if you use the !important rule, it will even override inline styles!

The table below shows some examples on how to calculate specificity values:

Selector	Specificity Value	Calculation
p	1	1
p.test	11	1 + 10
p#demo	101	1 + 100
	1000	1000
#demo	100	100
.test	10	10
p.test1.test2	21	1 + 10 + 10
#navbar p#demo	201	100 + 1 + 100
*	0	0 (the universal selector is ignored)

The selector with the highest specificity value will win and take effect!

Consider these three code fragments:

Example

A: h1
B: h1#content
C:

Heading

The specificity of A is 1 (one element selector)
The specificity of B is 101 (one ID reference + one element selector)
The specificity of C is 1000 (inline styling)

Since the third rule (C) has the highest specificity value (1000), this style declaration will be applied.

More Specificity Rules Examples

Equal specificity: the latest rule wins — If the same rule is written twice into the external style sheet, then the latest rule wins:

Example

ID selectors have a higher specificity than attribute selectors — Look at the following three code lines:

Example

the first rule is more specific than the other two, and will therefore be applied.

Contextual selectors are more specific than a single element selector — The embedded style sheet is closer to the element to be styled. So in the following situation

Example

the latter rule will be applied.

A class selector beats any number of element selectors — a class selector such as .intro beats h1, p, div, etc:

Example

The universal selector (*) and inherited values have a specificity of 0 — The universal selector (*) and inherited values are ignored!

Источник

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

Специфичность — это алгоритм, благодаря которому браузер определяет, какие именно стили из всего набора применить к элементу. В вычислениях участвуют CSS-селекторы. Если одному и тому же элементу подходит сразу несколько CSS-правил с разными селекторами, то браузер применяет те стили, вес селектора которых больше. Правило каскада «кто ниже, тот и выигрывает» при этом может нарушаться.

Специфичность — это одно из базовых понятий в CSS.

Вес селекторов

Скопировать ссылку «Вес селекторов» Скопировано

Давайте разберёмся, как браузер взвешивает селектор. Ниже перечислены типы селекторов по убыванию специфичности:

Комбинаторы + , > , ~ , универсальный селектор * и псевдокласс :where ( ) веса не имеют.

Псевдоклассы :is ( ) , :has ( ) и :not ( ) принимают вес наиболее специфичного селектора внутри скобок.

Система расчёта

Скопировать ссылку «Система расчёта» Скопировано

Существует удобный способ вычисления веса селектора в уме. Выше мы перечислили три группы сущностей, из которых может состоять селектор. Представим любой селектор в виде трёх нулей: 0.0.0.

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

Один селектор равен единице.

Пока сложно понять. Давайте разберёмся на примерах.

• Селектор #some состоит из одного идентификатора. Один селектор = 1. Увеличиваем первую цифру на 1. В итоге вес такого селектора равен 1.0.0.
• .class состоит из одного класса. Увеличиваем вторую цифру на 1. Получаем вес селектора 0.1.0.
• section состоит из одного тега. Увеличиваем последнюю цифру на 1. Вес селектора равен 0.0.1.

Дальше аналогично можем посчитать вес комбинированных селекторов.

div # some состоит из одного селектора по тегу и одного идентификатора. Селектор по тегу увеличивает последнюю цифру, селектор по идентификатору — первую. Вес селектора равен 1.0.1.

section h1 состоит из двух селекторов по тегу. Увеличиваем последнюю цифру на два и получаем вес 0.0.2.

#block section > . list a состоит из идентификатора (первая цифра), двух тегов (последняя цифра) и класса (вторая цифра). Вес селектора равен 1.1.2.

* . list a состоит из одного класса и одного тега. Итоговый вес будет 0.1.1. Универсальный селектор ничего не весит 🪶

Для наглядности расположим селекторы по убыванию веса. Сверху самый тяжёлый.

Селектор	Вес
#block section > . list a	1.1.2
div # some	1.0.1
#some	1.0.0
* . list a	0.1.1
.class	0.1.0
section h1	0.0.2
section	0.0.1

Если не очень хочется считать в уме, можно воспользоваться калькулятором специфичности CSS Specificity calculator.

Атрибут style

Скопировать ссылку «Атрибут style» Скопировано

CSS-свойства, написанные в атрибуте style внутри HTML-разметки, перебивают свойства, написанные для этого элемента во внешних CSS-файлах или внутри тега . Так что формально атрибут style самый специфичный, у него самый большой вес.

Иногда его добавляют в формулу в виде четвёртой цифры, стоящей перед всеми. Посмотрим на примере:

   Some smart text  div class="element" id="this" style="color: purple; border: none"> Some smart text div>    Скопировать Скопировано Не удалось скопировать   

 div.element#this  color: green; border: 10px solid red;> div.element#this  color: green; border: 10px solid red; >    Скопировать Скопировано Не удалось скопировать   

У селектора в CSS будет специфичность 1.1.1, потому что там указан один идентификатор, один класс и один селектор тега. Но в итоге текст в блоке будет пурпурным, а рамки не будет совсем. Потому что у тега style вес равен 1.0.0.0 🏋️

!important

Скопировать ссылку «!important» Скопировано

Ключевое слово !important нарушает все установленные спецификацией законы и насильно применяет свойство, после которого написано. Ему плевать на селектор CSS-правила, внутри которого это свойство написано. Будет так, и никак иначе.

Формально это ключевое слово не имеет отношения к концепции специфичности. Но из-за его варварских замашек нельзя не принимать его во внимание.

Тут к месту будет ещё раз напомнить, что ключевое слово !important всегда стоит использовать с осторожностью и не злоупотреблять им. В том числе из-за того, что оно нарушает естественную работу специфичности и каскада.

На практике

Скопировать ссылку «На практике» Скопировано

Вадим Макеев советует

Скопировать ссылку «Вадим Макеев советует» Скопировано

Самый правильный способ справиться со специфичностью — отказаться от возни с ней и построить систему стилей так, чтобы у всех селекторов была одна специфичность. Например, с помощью БЭМ-классов. Но если уж пришлось сражаться, есть интересный трюк!

Представим, что у нас есть простой блок с двумя классами:

   Кто я?  div class="tomato plum"> Кто я? div>    Скопировать Скопировано Не удалось скопировать   

Если написать классы в порядке сначала .tomato , а потом .plum , то текст будет сливовый (plum):

 .tomato  color: tomato;> .plum  color: plum;> .tomato  color: tomato; > .plum  color: plum; >    Скопировать Скопировано Не удалось скопировать   

Если поменять классы в CSS местами, то победит последний, и текст станет томатным:

 .plum  color: plum;> .tomato  color: tomato;> .plum  color: plum; > .tomato  color: tomato; >    Скопировать Скопировано Не удалось скопировать   

Но если нарастить класс .tomato им самим же… что?! Да-да, он выиграет в любом порядке: текст будет томатным.

 .tomato.tomato  color: tomato;> .plum  color: plum;> .tomato.tomato  color: tomato; > .plum  color: plum; >    Скопировать Скопировано Не удалось скопировать   

Потому что у него выше специфичность! Нужно больше специфичности? Легко! Класс можно продолжать наращивать, пока вам не хватит.

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Понимание концепции специфичности очень важно для понимания общего механизма вычисления стилей браузерами. Но, как правило, если проект написан хорошо, то вам не придётся перебивать селекторы более специфичными.

Если у вас возникает соблазн перебить существующие стили более специфичным селектором, то советую вам разобраться в первопричине проблемы, а не поддаваться порыву.

Такой трюк может быть обоснован, только если вы работаете на проекте, к исходникам которого у вас нет доступа, а стили поменять надо. Там придётся подбирать тяжёлые в плане специфичности селекторы, ничего не поделать 😔

Источник

What is CSS Specificity and How Does it Work?

Kingsley Silas Chijioke Last updated Oct 31, 2019

When working with CSS conflicting styles can be a thorn in your side, especially when you don’t know where the conflict is originating from. This tutorial will give you a firm understanding of CSS specificity which will help fill in any knowledge gaps so you don’t end up pulling your hair out of frustration.

Note: perhaps you’re a seasoned CSS pro? This is a topic developers have enjoyed talking about since the earliest days of CSS, but it’s always fun to refresh your memory!

Everything You Need to Know About CSS

This tutorial is part of our Learn CSS: The Complete Guide—check it out and get bookmarking!

What is CSS Specificity?

MDN put it nicely (as always):

“Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.”

That means that CSS specificity is a set of rules used by browsers in determining which of the developer-defined styles will be applied to a specific element. For a style to be applied to a particular element, the developer has to abide by the rules, so that the browser knows how to apply the style.

When two or more styles target a particular element, the style with the highest specificity is the one that gets applied.

Understanding the Hierarchy of CSS Specificity

The specificity of a style is dependent on where the selector ranks when compared to other conflicting selectors. Selectors define how you target the element you want to style in CSS. Let’s look at the selectors in the hierarchy of highest to lowest:

Inline Styles

These are styles defined in the HTML document, directly attached to the element that’s to be styled. For example:

 style='color: red'>Hello World 

These kinds of styles are not commonly used as it’s considered best practise to “separate concerns” and have your styles in an external stylesheet. Yet, in the hierarchy of styles, inline styles rank highest.

ID Selectors

ID selectors are the next in the queue. These are selectors that target an element using the element’s ID. IDs are unique; an element can have just one ID, and that ID can be used only once within an HTML document.

They can be overridden by inline styles.

Classes, Attributes, and Pseudo Classes

ID selectors are followed by class selectors, attribute selectors, and pseudo-class selectors. Here’s some example markup, showing corresponding CSS selectors with each one:

 class="hello-header">Hello World! 

Источник