Introducere în Web Development

Atunci când un element se potrivește mai multor selectori, e posibil ca aceeași proprietate de CSS să fie setată diferit. Iată un exemplu:

                    <style>

div {
  color: inherit;
}

#id {
  color: green;
}

.clasa {
  color: blue;
}

</style>
                

                    <div id="id" class="clasa" style="color: yellow"></div>
                

În acest caz, culoarea este setată pentru același element în 4 feluri: din atributul style, după nume de element, după ID, și după clasă. Regulile de specificitate ajută browserul să știe mereu ce culoare să seteze.

Iată regulile:

1. Proprietățile setate în atributul style au prioritate mai mare decât cele venite prin selectori. Așadar, răspunsul la problema de mai sus e că se setează culoarea galbenă.

2. Când selectorul conține mai multe #id-uri, are prioritate selectorul cu mai multe #id-uri.

3. Selectorii care au cel puțin un #id au prioritate față de cele care au doar clasă și tag.

4. Când selectorul conține mai multe clase, are prioritate selectorul cu mai multe clase.

5. Selectorii care au cel puțin o clasă sau pseudo-clasă au prioritate față de cele care au doar tag.

6. Când selectorii conțin mai multe elemente, are prioritate cel care conține mai multe elemente.

7. Când nu s-a putut găsi un selector mai specific, va avea prioritate cel care vine mai târziu în codul HTML sau CSS.

Un fel mai tehnic de a vedea lucrurile e să asignăm 4 numere:

Pentru fiecare ID care apare, crește numărul din dreptul #id.
Pentru fiecare clasă, crește numărul din dreptul .clasa.
Pentru fiecare nume de element din selector, crește numărul din dreptul tag.

Stilurile definite la selectorul cu sumă mai mare în P2 vor avea prioritate. La egalitate, se consideră suma din P3, apoi P4.