Ierarhia specificității în CSS

Ierarhia Specificității

Selectorii au „ponderi” diferite, iar fiecare tip de selector CSS ocupă o poziție în ierarhia de specificitate. De la cel mai puternic la cel mai slab:

Stilurile inline — cea mai mare prioritate, trec peste toți ceilalți selectori.
Selectorii de ID (ex. #navbar) — următorii ca prioritate, cu ponderea 1-0-0.
Clase, selectori de atribute și pseudo-clase (ex. .test, [type="text"], :hover) — a treia prioritate, cu ponderea 0-1-0.
Selectorii de elemente și pseudo-elementele (ex. <h1>, ::before, ::after) — prioritate mică, cu ponderea 0-0-1.
Selectorul universal (*) și :where() — fără prioritate, cu ponderea 0-0-0.

Înțelegerea Notației de Pondere

O pondere se scrie cu trei numere (X-Y-Z), iar fiecare numără un grup de selectori:

X — selectorii de ID.
Y — selectorii de clasă, selectorii de atribute și pseudo-clasele.
Z — selectorii de elemente și pseudo-elementele.

Comparația începe din stânga, așa că un număr mai mare în poziția cea mai din stânga câștigă direct. La egalitate, decide următorul număr, și așa mai departe.

Calcularea Ponderii Specificității

Un element primește declarația CSS cu cea mai mare pondere de specificitate.

Exemplu

Aici mai mulți selectori cu ponderi diferite vizează același paragraf, ceea ce arată cum funcționează ierarhia de specificitate. Cu o pondere de 1-0-1, cea mai mare dintre ele, câștigă p#demo.

Creați o pagină care demonstrează ponderile ierarhiei de specificitate CSS. Definiți mai multe reguli CSS care vizează același paragraf: un selector de ID (#demo), un selector combinat (p#demo), un selector de clasă (.test), un selector de clasă combinat (p.test) și un selector de element (p). Paragraful trebuie să aibă id="demo" și class="test" și să afișeze "Hello World!" în culoarea regulii cu cea mai mare specificitate (portocaliu, din p#demo, cu ponderea 1-0-1). Adăugați comentarii CSS care arată ponderea fiecărei reguli.

> Output: pagină HTML completă

Prompt

Creați o pagină care demonstrează ponderile ierarhiei de specificitate CSS. Definiți mai multe reguli CSS care vizează același paragraf: un selector de ID (#demo), un selector combinat (p#demo), un selector de clasă (.test), un selector de clasă combinat (p.test) și un selector de element (p). Paragraful trebuie să aibă id="demo" și class="test" și să afișeze "Hello World!" în culoarea regulii cu cea mai mare specificitate (portocaliu, din p#demo, cu ponderea 1-0-1). Adăugați comentarii CSS care arată ponderea fiecărei reguli.

Output: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Specificity Weight</title>
<style>
#demo {color: blue;} /* weight: 1-0-0 */
p#demo {color: orange;} /* weight: 1-0-1 WINS! */
.test {color: green;} /* weight: 0-1-0 */
p.test {color: green;} /* weight: 0-1-1 */
p {color: red;} /* weight: 0-0-1 */
</style>
</head>
<body>

<p id="demo" class="test">Hello World!</p>

</body>
</html>

Mai Multe Exemple de Specificitate

Scenariile de mai jos arată cum se comportă specificitatea în alte câteva situații, ca să o înțelegi mai bine.

Specificitate egală: câștigă ultima regulă

Când o regulă apare de două ori în foaia de stiluri, câștigă cea scrisă ultima.

Creați o pagină care demonstrează că, atunci când două reguli CSS au aceeași specificitate, ultima regulă câștigă. Definiți două reguli h1: prima setează background-color la galben, iar a doua setează background-color la roșu. Afișați un titlu h1 pentru a arăta că fundalul roșu câștigă.

> Output: pagină HTML completă

Prompt

Creați o pagină care demonstrează că, atunci când două reguli CSS au aceeași specificitate, ultima regulă câștigă. Definiți două reguli h1: prima setează background-color la galben, iar a doua setează background-color la roșu. Afișați un titlu h1 pentru a arăta că fundalul roșu câștigă.

Output: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Equal Specificity</title>
<style>
h1 {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>

<h1>Hello World!</h1>

</body>
</html>

Selectorii de ID câștigă în fața selectorilor de atribute

Chiar și atunci când un selector de atribut vizează ID-ul elementului, un selector de ID îl depășește la specificitate, așa că se aplică regula selectorului de ID.

Creați o pagină care demonstrează că un selector de ID are o specificitate mai mare decât un selector de atribut. Utilizați #myDiv cu background-color galben și div[id=myDiv] cu background-color albastru. Afișați un element div cu id="myDiv" pentru a dovedi că selectorul de ID câștigă (fundal galben).

> Output: pagină HTML completă

Prompt

Creați o pagină care demonstrează că un selector de ID are o specificitate mai mare decât un selector de atribut. Utilizați #myDiv cu background-color galben și div[id=myDiv] cu background-color albastru. Afișați un element div cu id="myDiv" pentru a dovedi că selectorul de ID câștigă (fundal galben).

Output: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID Selector vs Attribute Selector</title>
<style>
#myDiv {background-color: yellow;}
div[id=myDiv] {background-color: blue;}
</style>
</head>
<body>

<div id="myDiv">This div has id="myDiv".</div>

</body>
</html>

Un selector de clasă câștigă în fața selectorilor de elemente

Selectorii de elemente precum <h1>, <p> și <div> pierd toți în fața unui selector de clasă precum .intro.

Creați o pagină care demonstrează că un selector de clasă are prioritate față de un selector de element. Definiți .intro cu background-color galben și h1 cu background-color roșu. Afișați un element h1 cu class="intro" pentru a demonstra că selectorul de clasă câștigă (fundal galben).

> Output: pagină HTML completă

Prompt

Creați o pagină care demonstrează că un selector de clasă are prioritate față de un selector de element. Definiți .intro cu background-color galben și h1 cu background-color roșu. Afișați un element h1 cu class="intro" pentru a demonstra că selectorul de clasă câștigă (fundal galben).

Output: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Selector vs Element Selector</title>
<style>
.intro {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>

<h1 class="intro">Hello World!</h1>

</body>
</html>

Selectorul universal (*)

Deoarece selectorul universal (*) nu are nicio valoare de pondere a specificității, orice alt selector îl suprascrie.

Creați o pagină care demonstrează că selectorul universal (*) nu are pondere de specificitate. Definiți * cu background-color galben și h1 cu background-color roșu. Afișați un titlu h1 pentru a arăta că selectorul de element câștigă în fața selectorului universal (fundal roșu).

> Output: pagină HTML completă

Prompt

Creați o pagină care demonstrează că selectorul universal (*) nu are pondere de specificitate. Definiți * cu background-color galben și h1 cu background-color roșu. Afișați un titlu h1 pentru a arăta că selectorul de element câștigă în fața selectorului universal (fundal roșu).

Output: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Universal Selector Specificity</title>
<style>
* {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>

<h1>Hello World!</h1>

</body>
</html>

Stil încorporat versus foaie de stiluri externă

La aceeași specificitate, o foaie de stiluri încorporată câștigă în fața uneia externe atunci când este mai aproape de element, deoarece apare mai târziu.

/*From external CSS file:*/
#content h1 {background-color: red;}

/*In HTML file:*/
<style>
#content h1 {background-color: yellow;}
</style>