Hierarchia selektorów css jest ważnym elementem przy projektowaniu szaty graficznej strony internetowej – formatowaniu poszczególnych elementów. Co się dzieje gdy kilka reguł obejmuje ten sam element? Jak przewidzieć końcowy rezultat?
Czym są selektory?
CSS (Cascading Style Sheets) to język dyktujący jak elementy zapisane w HTML mają wyglądać na stronie. Kod CSS zapisywany jest przeważnie w osobnym pliku, a każde przypisanie stylu składa się z:
- selektora; określa do jakich elementów zostanie przypisany styl,
- deklaracji; określa styl, składa się z atrybutu i wartości.
Typy selektorów
- ID – selektory odwołujące się do danego ID; “#id”,
- klasy – selektory odwołujące się do klasy: “.klasa”,
- elementu – selektory odwołujące się do danego elementu, na przykład: “p”,
- * – selektor wszystkiego,
- psudo-klasy – “:pseudoklasa”,
- atrybutu; na przykład – “[type=”radio”]”,
- pseudo-elementu – “::pseudoelement”.
Kaskadowa hierarchia selektorów
Jeśli styl dla właściwości danego atrybutu zostały zdefiniowane w różnych miejscach kodu CSS to końcowy wynik formatowania ustalany jest według hierarchii kaskadowej kolejno:
- kod w tagu HTML
- kod w pliku HTML i plik zewnętrzny
- ustawienia ogólne przeglądarki
Specificity – algorytm szczegółowości
Zdarza się, że do jednego elementów przypisanych jest kilka reguł. To która z nich ma największą wagę ustala algorytm. Operuje on na kilku regułach, które warto znać chcąc wiedzieć jaki styl zostanie przypisany do elementu.
Liczenie wag w hierarchii selektorów
Aby obliczyć wagę przypisywaną do danej reguły stylu zaczynamy od trzech kolumn z zerami. Następnie liczymy:
- Pierwsza kolumna odpowiada ilości selektorów ID
- Druga kolumna- ilości klas w tym pseudo-klas i selektorów atrybutów
- Trzecia kolumna- ilości elementów w tym pseudo-elementów
Po podliczeniu uzyskane liczby można porównać między sobą. Robi się to zaczynając od pierwszej kolumny i idąc po kolejnych. Na przykład, [9,0,0] ma większą wagę od [3, 11, 11], ale mniejszą od [9, 0, 1]. Zamiast porównywania kolejnymi kolumnami można przekształcić je na liczbę wybierając podstawę większą od największej zawartej w niej liczbie. Dla podanego przykładu ([9,0,0]) można wybrać liczbę 10 i wymnożyć kolejne kolumny: 0*10^0+1*10^1+9*10^2. Jednak należy pamiętać, że nieważne jak wiele jest niższych wagą selektorów, wyższy będzie miał większe znaczenie, to znaczy, [1,0,0] jest ważniejsze od [0, 12, 9].
Szczególne przypadki
Powyższe zasady uwzględniają większość przypadków, jednak należy podkreślić kilka specyficznych sytuacji.
Selektor “*” nie ma żadnej wagi. Podobnie jak “:where()” i jej parametry.
Nie zawsze selektory są proste, istnieją również selektory złożone, tworzone za pomocą kombinatorów, takich jak: “+” czy “>”. Mimo, że zwiększają one szczegółowość reguły to nie przypisuje się im wagi.
Reguły osadzone, tzw. “nesting” oraz pseudo-klasy “:not()”, “:is()” i “:has()” same w sobie nie mają wagi. Jednak ich parametry już ją mają, oblicza się ją jako równowartość wagi najważniejszego selektora.
Hierarchia selektorów – podsumowanie
Konkludując, przy używaniu wielu reguł może zdarzyć się sytuacja, że odnoszą się one do jednego elementu. Aby wiedzieć, jaki będzie końcowy efekt jego formatowania należy posłużyć się algorytmem szczegółowości, który umożliwia obliczenie wagi danej reguły. Warto również pamiętać, że gdy dwie zasady mają taką samą wagę, to liczy się ta zapisana później, pojawiająca się dalej w kodzie. Również gdy zasada zapisana w linii kodu HTML konkuruje z taką zapisaną w osobnym arkuszu CSS, to ma ona pierwszeństwo.
