Specyficzność i kaskada
specyficzność = ID - klasy, atrybuty i pseudoklasy - typy i pseudoelementy
Gdy kilka deklaracji celuje w tę samą właściwość elementu, kaskada rozstrzyga krok po kroku: według pochodzenia i !important (przeglądarka, użytkownik, strona), według warstwy @layer, według specyficzności selektora i na końcu według kolejności w CSS – wygrywa późniejsza. Specyficzność zapisuje się jako trzy liczby, na przykład 1-2-1, i porównuje od lewej.
Wartości
- pierwsza liczba – selektory ID (
#menu). - druga liczba – klasy (
.card), atrybuty ([type="text"]) i pseudoklasy (:hover,:nth-child()). - trzecia liczba – typy (
p,li) i pseudoelementy (::before). - nic nie dodają –
*, kombinatory (spacja,>,+,~) i:where(). - według zawartości –
:is(),:not()i:has()dodają najwyższą specyficzność ze swojej listy. - atrybut style – deklaracje bezpośrednio w HTML nadpisują każdy selektor (oprócz
!important).
Przykłady: p = 0-0-1, .menu a = 0-1-1, #main .menu li:hover = 1-2-1.
Przykłady
Trzy reguły dla tego samego linku. Wygrywa ta o najwyższej specyficzności, choć stoi pierwsza:
<nav id="menu"> <a class="link" href="#">Kontakt</a> </nav>
/* 1-0-1 – wygrywa */
#menu a { color: #e65100; }
/* 0-1-1 */
nav .link { color: #43a047; }
/* 0-1-0 */
.link {
color: #0088d1;
font-weight: 700;
}
Pogrubienie ustawia tylko .link, więc zostaje użyte – kaskada rozstrzyga osobno dla każdej właściwości.
Na co uważać
- Liczby się nie przelewają: jedna klasa (
0-1-0) wygrywa nawet z selektorem z jedenastoma typami (0-0-11). - Wartość odziedziczona nie ma żadnej specyficzności. Reguła
p { color: … }wygrywa z kolorem odziedziczonym po#content, choć#contentma ID. - Przy równej specyficzności decyduje kolejność – łącznie z kolejnością plików CSS w HTML.
- Kto wygrywa spory o specyficzność kolejnymi klasami lub ID, ten się w końcu zaplącze. Do łatwych do nadpisania stylów podstawowych służą
:where()i@layer.
Zobacz też:
!important
@layer
:where()
:is()
Selektor ID (#id)
Selektor klasy (.klasa)