Logo
Hamburger icon Close icon
Go to top
WYNIKI WYSZUKIWANIA:
Specyfikacja selektorów CSS

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 !important bę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)
Kurs Błyskawiczne tworzenie stron z Tailwind CSS

Kurs Błyskawiczne tworzenie stron z Tailwind CSS

Zobacz kurs Arrow
Fundamenty CSS - stylowanie stron od podstaw

Fundamenty CSS - stylowanie stron od podstaw

Zobacz kurs Arrow
Kurs Metodologia BEM - jak pisać dobry kod CSS

Kurs Metodologia BEM - jak pisać dobry kod CSS

Zobacz kurs Arrow

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
Users icon 13130 uczestników
Watch icon 79 godzin
Video icon 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

Interesują Cię nowe technologie?

Zapisz się do naszego newslettera!