ЦСС специфичност и када користити ЦСС важну ознаку

Специфичност ЦСС-а је важна тема коју треба разумети ако желите да будете бољи у ЦСС-у. Скуп правила који се примењују на ЦСС селекторе одређује који се стил примењује на елемент.

Да бисмо ово боље разумели, важно је да разумемо повезану тему - каскадно у ЦСС-у.

Каскадна природа ЦСС-а

ЦСС означава каскадне табеле стилова. „Каскадно“ значи да је редослед примене ЦСС правила на елемент заправо важан .

У идеалном случају, ако се на исти елемент примењују два правила, оно које ће доћи последње је оно које ће се користити. Употребимо пример да ово схватимо.

На елемент ћемо применити две класе и свакој класи дати различиту background-color.

This is a test paragraph

Ево ЦСС-а:

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

Ово је резултат:

Приметите да style1се последње у табели стилова примењује на елемент. Сада можете очекивати да ће увек бити како ЦСС примењује стилове на елементе, али то није увек случај.

Узмите следећи пример.

This is a test paragraph

ЦСС изгледа овако:

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

Који стил очекујете да примените на елемент? Тхе #paragraphили тхе .style1?

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

Приметите да се примењује први. Тхе #paragraphје селектор ид, док style1је селектор класе. То је зато што каскада са специфичношћу одређује које вредности се примењују на елемент.

Па, шта је ЦСС специфичност?

Објашњена ЦСС специфичност

Према МДН-у, Специфичност је начин на који претраживачи одлучују које вредности ЦСС својства су најрелевантније за елемент и, према томе, биће примењене.

Једноставно речено, ако се два ЦСС селектора примењују на исти елемент, користи се онај са већом специфичношћу.

Због тога је у нашем претходном примеру примењена вредност својства селектора ид јер има већу вредност специфичности.

Па како се израчунавају специфичности селектора?

Хијерархија специфичности

Израчунавање вредности специфичности селектора је прилично незгодно. Један од начина за израчунавање је коришћење система тежине за рангирање различитих селектора за стварање хијерархије.

Сваком селектору ћемо доделити пондере како бисмо боље разумели како се рангира сваки селектор. Кренимо од најмањег.

Елементи и псеудо-елементи

Користимо бираче елемената попут a, pи divза обликовање изабраног елемента, док псеудо-елементи воле ::afterи ::beforeкористе се за обликовање одређених делова елемента.

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

Селектори елемената и псеудо-елемената имају најмању специфичност. У систему тежине специфичности имају вредност 1.

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

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

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

Имају већу специфичност од селектора елемената и псеудо-елемената. У нашем систему тежине за специфичност имају вредност 10.

Селектори ИД-а

Бирачи ИД-а користе се за циљање елемента помоћу ИД-а елемента.

 #header { color: red; }

Селектори ИД имају већу специфичност од класа и елемената. У нашем систему тежине за специфичност имају вредност 100.

Инлине Стилес

Уграђени стилови се примењују директно на елемент у ХТМЛ документу. Ово је пример:

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

Из овог чланка можемо видети да је специфичност ЦСС-а важна тема коју треба разумети јер вам може уштедети сате отклањања грешака.

Са овим знањем можете лако открити зашто се ваши стилови не примењују.

Ево главних тачака које треба уклонити из овог чланка:

  • Због каскадне природе ЦСС-а, ако се на исти елемент примене два правила, оно које ће бити последње биће оно које ће се користити.
  • ЦСС специфичност је скуп правила која одређују који стил се примењује на елемент.
  • Систем тежине је један од начина израчунавања специфичности различитих селектора. Ево резимеа пондера:
Inline Styles - 1000 ID selectors - 100 Classes, Attributes and Pseudo-classes - 10 Elements and Pseudo-elements - 1 
  • !important поништава све остале стилове без обзира на специфичност селектора где се користи.

Надам се да сте уживали читајући овај чланак.