Odkrywamy zaawansowane techniki CSS: złożone selektory

Specyficzność CSS

Specyficzność CSS (z ang. ‘specifity’) określa wagę właściwości CSS. Innymi słowy, jeśli w dwóch lub więcej miejscach zostaną zadeklarowane dla tego samego elementu różne właściwości, np. różne kolory tła, specyficzność określa, która z deklaracji jest „ważniejsza”.

Ważna jest więc umiejętność obliczania specyficzności danego elementu, która pozwala niekiedy zaoszczędzić sporo czasu straconego na przeszukiwaniu pliku CSS w odpowiedzi na pytanie: „dlaczego ten akapit ma niebieskie tło, skoro deklarowałem zielone”.

Oto jak oblicza się specyficzność konkretnego selektora:

• Dodaj 1000 (styl jest umieszczony w kodzie HTML):

• Za każdy identyfikator należy dodać po 100:

• Każda klasa to 10:

• Wszystkie inne elementy, pseudoklasy, elementy HTML mają wartość 1:

• Uniwersalny selektor (*) ma wartość 0 (zero).

Jeśli właściwość danego elementu będzie różnie zadeklarowana w wielu miejscach, dominującą będzie ta, która ma największą specyficzność (nawet, gdy jest zadeklarowana wcześniej niż pozostałe).

Przykłady:

• a.stopka, h4, h5    0013
• #footer, img    0101
• #sidebar, p:first-line    0102
• h2, h3, h4, h5    0004

Spośród poniższych dwóch selektorów, właściwości tego pierwszego zostaną nadane elementom, ponieważ ma on większą specyficzność.

• #sidebar p#first { color: red; } — 0201
• #sidebar p:first-line { color: blue; } — 0102

W zrozumieniu specyficzności pomóc może podstawowe narzędzie webmastera, czyli Firebug. Po zaznaczeniu elementu na karcie HTML, w oknie styl po prawej stronie można przeglądać, jakie właściwości ma on nadany w kolejności od największej specyficzności.

Przydatne linki:

• CSS Specificity: Things You Should Know
• Link Specificity¯MeyerWeb
• CSS: Specificity Wars
• Assigning property values, Cascading, and Inheritance—W3C