Специфика на CSS и кога да се използва важният етикет на CSS

Специфичността на CSS е важна тема, за да разберете, ако искате да се подобрите в CSS. Наборът от правила, прилагани към CSS селектори, определя кой стил се прилага към елемент.

За да разберем това по-добре, важно е да разберем свързана тема - каскадно в CSS.

Каскадната природа на CSS

CSS означава каскадни таблици със стилове. "Каскадно" означава, че редът, в който се прилагат правилата на CSS към елемент, всъщност има значение .

В идеалния случай, ако две правила се прилагат към един и същ елемент, последното ще бъде използваното. Нека използваме пример, за да разберем това.

Ще приложим два класа към елемент и ще дадем на всеки клас различен background-color.

This is a test paragraph

Ето CSS:

.style2 { background-color: red; } .style1 { background-color: yellow; }

Това е резултатът:

Забележете, че style1последното в таблицата със стилове се прилага към елемента. Сега може да очаквате, че това винаги е начинът, по който CSS прилага стилове към елементи, но не винаги е така.

Вземете този следващ пример.

This is a test paragraph

CSS изглежда така:

#paragraph { background-color: red; } .style1 { background-color: yellow; }

Кой стил очаквате да приложите към елемента? The #paragraphили .style1?

Ето резултата:

Забележете, че се прилага първото. The #paragraphе селектор на id, докато the style1е селектор на клас. Това е така, защото каскадата работи със специфичност, за да определи кои стойности се прилагат към даден елемент.

И така, каква е специфичността на CSS?

Обяснена специфичност на CSS

Според MDN специфичността е средството, чрез което браузърите решават кои CSS стойности на свойствата са най-подходящи за даден елемент и следователно ще бъдат приложени.

Най-просто казано, ако два CSS селектора се прилагат към един и същ елемент, се използва този с по-висока специфичност.

Ето защо в нашия предишен пример беше приложена стойността на свойството на селектора на id, тъй като има по-висока стойност на специфичност.

И така, как се изчисляват спецификите на селекторите?

Йерархията на специфичността

Изчисляването на стойностите на специфичността на селекторите е доста сложно. Един от начините да се изчисли е да се използва система за тегло, за да се класират различни селектори, за да се създаде йерархия.

Ще присвоим тегла на всеки селектор, за да разберем по-добре как се класира всеки селектор. Да започнем с най-малкото.

Елементи и псевдоелементи

Използваме селектори на елементи като a, pи, за divда стилизираме избран елемент, докато псевдоелементите харесват ::afterи ::beforeсе използват за стилизиране на определени части на елемент.

 p { color: red; }  p::before { color: red; }

Селекторите на елементи и псевдоелементи имат най-ниска специфичност. В системата за тегло на специфичността те имат стойност 1.

Класове, атрибути и псевдокласове

Ето примери за класове, атрибути и псевдокласове:

 .person { color: red; }  [type="radio"] { color: red; }  :focus { color: red; }

Те имат по-висока специфичност от елементите и псевдоелементните селектори. В нашата система за специфично тегло те имат стойност 10.

ID селектори

Селекторите на идентификатори се използват за насочване на елемент, като се използва идентификаторът на елемента.

 #header { color: red; }

Селекторите на ID имат по-висока специфичност от класовете и елементите. В нашата система за специфично тегло те имат стойност 100.

Вградени стилове

Вградените стилове се прилагат директно върху елемента в HTML документа. Това е пример:

This is a paragraph

Вградените стилове имат най-висока специфичност. В нашата система за тегло със специфичност те имат стойност 1000.

Ето резюме на тежестите:

Inline Styles - 1000 ID selectors - 100 Classes, Attributes and Pseudo-classes - 10 Elements and Pseudo-elements - 1 

Нека се опитаме да го осмислим.

The property values of selectors with a higher weight will always be applied over a selector with a lower weight.

Inline styles have the highest weight and their property value overrides every other selector's value applied to an element.

For example, if we have an element and for the same property color, there's an inline style. If the class and id selectors also have values for the same property, the inline style wins.

This is a paragraph

The stylesheet:

#paragraph { color: green; } .yellow { color: yellow; }

This is the result:

The same thing happens when an ID selector and class selector have values for the same property. The property value of the ID selector will apply.

Note that the weights only apply when different selectors have values for the same property.

Multiple Element Selectors

There are times when more than one selector is used to target an element. For example, for a list like this:

  • First item
  • Second item
  • Third item

You may target the list items like this:

.list > li { color: green; }

or like this:

ul > li { color: red; }

In a case where both selectors are used on the same stylesheet, which style will be applied to the list items?

Let's go back to our weight system to calculate the specificity of both selectors.

For .list > li, the weight of one class selector is 10 and the weight of an element selector is 1. Combined their sum is 11.

For ul > li, the weight of one element selector is 1. There are two element selectors used, so their sum is 2.

Which of the color values do you will think will be applied?

If you said the color of the .list>li selector will be applied, you got it right. It has a higher specificity value than the other selector.

Let's try another example. Given this element:

This is a paragraph

and these styles

#div-1 > .second-block > .text { color: blue } .first-block > #div-2 > #paragraph { color: red }

Try to calculate the specificity and guess which color value will apply.

This is the result:

Let's use our weight system to understand why the color value of the second selector is applied.

For #div-1 > .second-block > .text, we have one ID selector and two class selectors. The sum of their weights is 100 + 10 + 10 = 120.

For .first-block > #div-2 > #paragraph, we have one class selector and two ID selectors. The sum of their weights is 10 + 100 + 100 = 210.

That's why the value of latter selector is used.

You can try this example on your own to be sure that you get the hang of it.

  • First item

Which color will be applied to the span if the following styles are in the stylesheet?

div#div1 > .first-list > #list-item > span { color: red; } #list > #list-item > #span { color: purple; } #div1 > #list > .first-list-item > .first-span { color: light-blue; }

Try to calculate the specificity and compare it with the result you get when you run the code.

Before we conclude this article, there are some important points to note.

Important Points about CSS Specificity

The weight assigned to a selector just gives us an idea of which rules get applied to an element. However, this does not always suffice.

For instance, you may assume that if you use more than 10 classes (weight >= 100) to target an element, the property values will override that of one ID selector. But this is not true. As long as the selector with more than 10 classes have no ID selector, the one ID selector will always take precedence over it.

Applying !important to the property value of any selector makes it the value that will be applied to the element. This happens regardless of the rank of the selector on the Specificity hierarchy.

Let's use an example to understand this.

This is a paragraph

If the following styles are applied

p { color: red !important; } .blue { color: blue; } #paragraph { color: purple; }

The value of the element selector p will be used because of the !important attached to the value.

However, if another selector has the !important tag attached to the same property, the value of the later selector is used.

That's why !important should be avoided because it makes it difficult override a style.

Generally, to style a specific element, it is more advisable to use a class. This makes it easier to override the styles if you ever need to do so.

Summary

From this article, we can see that CSS specificity is an important topic to understand because it can save you hours of debugging.

With this knowledge, you can easily find out why your styles are not being applied.

Here are the major points to take out of this article:

  • Due to the cascading nature of CSS, if two rules are applied to the same element, the one that comes last is the one that will be used.
  • CSS specificity is a set of rules that determine which style is applied to an element.
  • The weight system is one way of calculating the specificity of different selectors. Here's a summary of the weights:
Inline Styles - 1000 ID selectors - 100 Classes, Attributes and Pseudo-classes - 10 Elements and Pseudo-elements - 1 
  • !important overrides all other styles regardless of the specificity of the selector where it is used.

I hope you enjoyed reading this article.