Specyfikacja selektorów CSS
Często zdarza się, że pisząc kod CSS niektóre z reguł nie są egzekwowane przez przeglądarkę. Przyczyną takiej sytuacji mogą być tzw. Specyfikacje CSS.
Aby lepiej zrozumieć czym są specyfikacje należy wspomnieć, że wszystkie selektory CSS których używamy podczas tworzenia strony mają określoną „wagę” w poszczególnych przeglądarkach internetowych. Waga ta jest właśnie definiowana przy pomocy specyfikacji selektorów CSS.
Kurs CSS3 - kodowanie ze stylem
Poznaj najnowsze trendy CSS3 - twórz piękne i zachwycające strony... Dowiedz się więcej
Zacznijmy od tego jak przeglądarki interentowe rozpoznają wprowadzane selektory CSS:
Weźmy dla przykładu następujący kod:
div.project p a { text-decoration: none; color: black; } div.project p a { text-decoration: none; color: green; }
Jak można łatwo zauważyć jeden element jest określony przy pomocy dwóch selektorów CSS. W tym przypadku definiowany element będzie miał kolor zielony, ponieważ deklaracja będąca niżej jest dla przeglądarki internetowej ważniejsza. Dzieje się tak dlatego, gdyż oba użyte selektory mają tę samą „wagę”. Czyli im niżej w arkuszu stylów, tym wyżej w hierarchii wartości.
Sytuacja wygląda inaczej w przypadku stosowania selektorów o różnej wadze. Wtedy istotną rolę odgrywa ich specyfikacja. Wyróżniamy cztery główne kategorie takich selektorów: style lokalne (inline styles), identyfikatory (ID), klasy oraz elementy.
Specyfikacja selektorów określa, która reguła CSS ma być egzekwowana przez przeglądarkę. Innymi słowy można powiedzieć, że każdy selektor ma swoją wagę, czyli zajmuje określone miejsce w hierarchii; jeśli zastosujemy dwa selektory definiujące jeden i ten sam element to przeglądarka rozpozna ten selektor, który ma większa wartość specyfikacji.
Wartości specyfikacji selektorów:
| 1. Inline style | 1000 pkt |
| 2. Identyfikator | 100 pkt |
| 3. Klasa (lub pseudoklasa/atrybut) | 10 pkt |
| 4. Element | 1 pkt |
Oczywiście należy pamiętać, że w języku CSS istnieje także taka deklaracja jak !important, która sprawia, że dany selektor zostaje automatycznie umiejscowiony na samej górze hierarchii. Deklaracja ta jest niejednokrotnie wykorzystywana jako swoistego rodzaju „droga na skróty” co nie zawsze jest dobrym rozwiązaniem. Trzeba przyznać, że zrozumienie i poprawne stosowanie specyfikacji może być znacznie trudniejsze, jednak dzięki temu pisany kod jest bardziej przejrzysty.
Zobaczmy jak obliczać wagę selektora na kilku przykładach:
#footer .contact .desc p a
Wartość specyfikacji tego selektora to 122 pkt (100 +10+10+1+1), ponieważ mamy identyfikator, dwie klasy i dwa elementy.
div#menu div.tytul a
Wartość tego selektora to z kolei 113 (100+10+3), ponieważ mamy jeden identyfikator, jedną klasę i trzy elementy.
Rzeczy o których należy pamiętać:
- Selektor (*) nie posiada zdefiniowanej wartości specyfikacji
- Jeśli użyte selektory mają tę samą wagę to ten, który znajduje się najniżej w arkuszu stylów będzie miał najwyższą pozycję w hierarchii.
- Deklaracja
!importantbędzie zawsze najważniejsza bez względu na wartość specyfikacji innych selektorów. - Identyfikatory mają o wiele większą wartość specyfikacji w porównaniu do klas czy elementów, dlatego należy ograniczać ich użycie.
- Pseudoklasy i atrybuty mają taką samą „wagę” jak klasy.
- Do obliczania wartości specyfikacji selektorów można stosować internetowe kalkulatory.
Przykładowe specyfikacje selektorów:
1. * { } |
0 |
2. p { } |
1 (jeden element) |
3. li:last-child { } |
2 (jeden element, jeden pseudoelement) |
4. ul li { } |
2 (dwa elementy) |
5. div p+span { } |
3 (trzy elementy) |
6. h1 + a[href*="facebook"] { } |
11 (jeden atrybut, jeden element) |
7. ul ol li.top { } |
13 (jedna klasa, trzy elementy) |
8. div.image.medium { } |
21 (dwie klasy, jeden element) |
9. style="" |
1000 (jeden inline style) |
Bez wątpienia specyfikacja selektorów CSS nie należy do najłatwiejszych zagadnień. O ile zrozumienie samego działania nie jest nadzwyczajnie trudne dla kogoś kto miał już styczność z kaskadowymi stylami arkuszy, to już wykorzystanie wiedzy w praktyce może przysporzyć nieco więcej trudności. Niemniej jednak, warto zainwestować czas na dobre opanowanie specyfikacji i odpowiedniego stosowania selektorów, dzięki czemu pisanie kodu, jego edycja i wykrywanie ewentualnych błędów będzie o wiele szybsze.
Źródła
css-specificity-things-you-should-know/
specifics-on-css-specificity/
how-to-use-css-specificity/
Opublikowane 12 lutego 2014 r. w kategorii: Programowanie
ŚCIEŻKA KARIERY
13130 uczestników
79 godzin
708 wykładów
Twórz atrakcyjne i funkcjonalne strony internetowe z użyciem nowoczesnych technik. Opanuj kluczowe podstawy, niezbędne narzędzia i zacznij tworzyć wspaniałe strony! Dowiedz się więcej
