Specyficzność (reguły kolizyjne CSS).
Na początku nauki CSS trzeba zaznajomić się z takimi zagadnienieniami jak specyficzność oraz kolizje znaczników. Zrozumienie tych pojęć jest kluczowe w nauce CSS. Wspomniane zagadnienia postaram się wyjaśnić na konkretnych przykładach.
Na wstępie przeanalizuj poniższy kod CSS:
body {
color: navy;
}
p {
color: green;
}
p {
color: yellow;
}
Jak myślisz, jaki kolor ostatecznie przyjmie tekst zawarty w akapicie tekst?
Przyjmie kolor żółty ponieważ występuje tu tzw. kolizja znaczników (akapit "p" występuje podwójnie w powyższym kodzie). W tym momencie przeglądarka zastosuje kolor z ostatniego (najniżej położonego) znacznika p. Jeszcze raz podkreślmy, że w tym przypadku mamy do czynienia z konfliktem znaczników.
A jak się zachowa akapit w poniższym przykładzie?
p {
color: green;
}
body {
color: navy;
}
Czy w tym przypadku również ma zastosowanie kolejność zapisu znaczników? Oczywiście, że nie ponieważ selektor "p" w tym przypadku jest bardziej specyficzny, tzn. bardziej dokładny, ponieważ odnosi się bezpośrednio do elementu p, a selektor body jest w tym przypadku bardziej ogólny. Tak więc w powyższym przykładzie kolejność nie ma żadnego znaczenia, może oprócz estetycznego ;) Budując arkusze CSS warto umieszczać definicje selektorów w kolejności zgodnej z ich występowaniem w dokumencie HTML.
Następne w kolejności zastosowania są:
1) Selektory klasy.
2) Selektory identyfikatora.
Tak naprawdę selektory mogą być o wiele bardziej złożone.
Jak więc wygląda wtedy ich specyficzność ?
Otóż można to wyliczyć. W poniższej tabeli przedstawiono wartości liczbowe dla poszczególnych selektorów:
|
Selektor identyfikatora |
Selektor klasy |
Selektor tagu |
|
100 pkt |
10 pkt |
1 pkt |
Przykłady obliczania punktacji:
div {color: navy;}
Suma punktów: 1.
div.footer {color: red;}
Suma punktów: 11.
#test .footer p {color:green;}
Suma punktów: 111.
Znajomość tej punktacji pozwala nam zrozumieć kolejność stosowania poszczególnych stylów przez przeglądarkę w sytuacji wystąpienia konfliktów (zastosowania tych samych selektorów w różnych miejscach arkusza CSS).