Ի՞նչ է CSS-ում հատուկությունը։

CSS-ում հատուկ նշանակություն տալու մեխանիզմն այն է, որը որոշում է, թե որ ոճի կանոնը կկիրառվի տարրին, եթե այդ տարրին միաժամանակ մի քանի կանոններ են կիրառվում:

Յուրաքանչյուր ընտրիչ ունի իր հատուկ նշանակության միավոր։ Բարձր միավորը նշանակում է բարձր առաջնահերթություն:

Հաշվարկը հիմնված է հետևյալ բաղադրիչների քանակի վրա ընտրիչում (վերադասականությամբ՝ կարևորությունից սկսած):

• Հարյուրավոր (1000): !important-ով նշված կանոնները (նրանք ունեն ամենաբարձր առաջնահերթությունը, բայց դրանց օգտագործումը չի խորհուրդ տրվում):
• Հարյուրավոր (100): Ինլայն ոճերը (որոնք գրված են անմիջապես HTML տարրի style հատկության մեջ):
• Հարյուրավոր (100): Հատկանիշներ (օրինակ #my-element):
• Տասնավոր (10): Կլասներ (օրինակ .class), псевդոկլասներ (օրինակ :hover, :focus), հատկություններ (օրինակ [type="text"]):
• Միավորներ (1): Տիպեր (օրինակ div, p), псевдоակնք (օրինակ ::before, ::after):
• Զրո (0): Համընդհանուր ընտրիչ (*), կոմբինատորներ (>, +, ~), ծնողի ընտրիչ (:not(), :is(), :where()) ինքնին չեն ավելացնում հատուկ նշանակություն, բայց կարող են ազդել դրա վրա փակագծերի ներսում:

Օրինակ հաշվարկ:

• p { ... } - Հատուկ նշանակություն՝ 0-0-0-1
• .my-class { ... } - Հատուկ նշանակություն՝ 0-0-1-0
• #my-id { ... } - Հատուկ նշանակություն՝ 0-1-0-0
• div.my-class { ... } - Հատուկ նշանակություն՝ 0-0-1-1
• ul > li.item[data-id="1"] { ... } - Հատուկ նշանակություն՝ 0-0-2-2 (li, ul = 2; .item, [data-id="1"] = 2)

Եթե երկու կանոն ունեն նույն հատուկ նշանակությունը, կիրառվում է այն կանոնը, որը գտնվում է CSS ֆայլի ներքևում:

/* style.css ֆայլ */
.my-element {
  color: blue; /* Հատուկ նշանակություն՝ 0-0-1-0 */
}

#element-id {
  color: red; /* Հատուկ նշանակություն՝ 0-1-0-0 */
}

.my-element {
  font-weight: bold; /* Հատուկ նշանակություն՝ 0-0-1-0, վերագրում է նախորդ կանոնին նույն հատուկ նշանակությամբ */
}

Այս դեպքում element-id id-ով տարրինը կլինի կարմիր, իսկ my-element դասով տարրինը՝ կապույտ և հաստ (կապույտը վերադառնում է կարմիրին՝ ավելի բարձր հատուկ նշանակության պատճառով #element-id)։

Հասկանալ հատուկ նշանակությունը կարևոր է կանխատեսելի և հեշտ պահպանվող CSS գրելու համար։ Պետք է խուսափել չափազանց բարդ հատուկ նշանակությունից և օգտագործել !important՝ ավելի լավ կառավարման համար։