Selectorii in CSS au grade diferite de importanta. Daca ar fi sa le dam o valoare fiecaruia, ar arata astfel:
| Selector | ID | class | element |
| Importanta | 100 | 10 | 1 |
Asadar selectorul #id este cel mai specific si cel mai puternic, acest lucru era de asteptat pentru ca un ID poate fi folosit doar pe un singur element in pagina. Asa ca stim sigur cui ne adresam.
Apoi avem selectorul .class care este mai slab decat cel ID dar mai puternic decat daca folosim doar numele unui element, precum p.
Asa ca daca avem urmatoarea pagina:
<html>
<head>
<style>
.paragraf {
color: blue;
}
p {
color: green;
}
</style>
</head>
<body>
<p class="paragraf">
Un paragraf de culoare albastra
</p>
</body>
</html>
Atunci paragraful nostru va avea culoarea albastra. Chiar daca selectorul p este ultimul in pagina, acesta nu este mai specific decat primul selector .paragraf. Asadar in acest caz nu conteaza pozitia in codul CSS, ambii selectori se adreseaza aceluiasi element, dar pentru ca .paragraf este mai specific, castiga.
O problema neasteptata
Se poate intampla uneori sa avem un conflict intre selectori si nici sa nu ne dam seama. Care credeti ca va fi culoarea finala pentru elementul <h2>?
<html>
<head>
<style>
#articol h2 {
color: blue;
}
h2 {
color: green;
}
.titlul {
color: red;
}
</style>
</head>
<body>
<article id="articol">
<h2 class="titlul">Titlul paginii</h2>
<p>
Un paragraf.
</p>
</article>
</body>
</html>
O astfel de problema este posibil sa apara daca nu ne organizam codul CSS bine. Desi nu am facut nimic extraordinar: am adaugat o clasa pe un element .titlul si apoi i-am oferit o culoare color: red;, acea culoare nu va fi aplicata pentru ca undeva in codul nostru exista un selector mai specific care ii va schimba culoarea elementului in blue.
Primul selector #articol h2 are specificitatea mai mare (in total are 101) decat selectorul clasa, de aceea regula lui se aplica in final.
Asadar un selector in final poate avea o importanta mai mare de 100 daca acesta este format din mai multe parti. De exemplu selectorul #un-id .clasa are o importanta de 110: 100 de la #un-id si 10 de la .clasa.
O solutie ar fi sa nu folosim selectorul ID atat de mult in CSS. In general este ocolit tocmai pentru ca este atat de greu de suprascris o regula data de el.
Nu inseamna ca aceasta este solutia, cu o organizare buna a codului CSS putem folosi orice selector dorim.
Selectori cu aceeasi specificate
Dar daca doi selectori au aceeasi specificitatea, atunci pozitia in codul CSS conteaza. De exemplu, cei doi selectori de mai jos se adreseaza aceluiasi elemnt si au si aceeasi specificitate:
<html>
<head>
<style>
strong.important {
color: red;
}
.paragraf > strong {
color: green
}
</style>
</head>
<body>
<p class="paragraf">
Un paragraf ce are un cuvant <strong class="important">important</strong>.
</p>
</body>
</html>
Ambii selectori au specificitatea 11, dar pentru ca selectorul .paragraf > strong este ultimul intalnit, atunci culoare lui se va aplica.
Dar problema aici este ca acest cod CSS nu este scris corect. Daca ajungem sa avem nevoie de un selector precum strong.important pentru a aplica o culoare unui element, atunci este probabil sa avem probleme de organizare in cod.
Nu spun ca acel selector este gresit si ca ar trebui evitat, dar selectorul .important ar trebui sa fie suficient.
Asa ca in general este recomandat sa folosim un selector cu o spesificitate cat mai mica, iar selectorul class ne ofera numai avantaje: este usor de de suprascris si este si destul de specific astfel inca putem stiliza doar un singur element.
Dar daca incepem sa folosim clase peste tot, atunci pot aparea alte probleme. Si pentru a fi pregatiti pentru ele, vom discuta mai pe larg in lectia urmatoare despre excesul de clasa.