1. FEJEZET
Ki dönt, ha két szabály ütközik?
Gyakran több CSS-szabály is ugyanannak az elemnek ugyanazt a tulajdonságát állítaná be. A böngésző ilyenkor nem „összekeveri” őket, hanem egy rögzített sorrendben dönt – ez a kaszkád (lépcső). A saját stíluslapjainkon belül ezt a négy lépést kell ismerni:
- Fontosságaz
!importantjelölésű deklaráció megelőzi a jelölés nélkülit - Az elemhez csatolt stílusa
style="…"attribútum megelőz minden stíluslapbeli szelektort - Specificitása szelektor „erőssége”: (ID, osztály, típus) pontszám – a nagyobb nyer
- Sorrendha minden más egyenlő, a később leírt szabály nyer
A döntés lépcsőzetes: a következő lépést csak akkor nézi a böngésző, ha az előzőn döntetlen lett. A specificitás tehát a 3. lépés – nem tartozik bele sem a style attribútum, sem az !important.
A böngésző saját alapstílusa (pl. a linkek kék színe) és a felhasználó beállításai is részt vesznek a kaszkádban, de mindig a mi stíluslapunk „alatt” – ezért tudjuk felülírni őket egy egyszerű a { color: … } szabállyal.
2. FEJEZET
A specificitás kiszámolása
A specificitás három szám, amelyet a szelektor részeiből számolunk össze:
| Oszlop | Mit számolunk? | Példák |
|---|---|---|
| A ID | azonosító-szelektorok | #fejlec |
| B osztály | osztály-, attribútum- és pszeudo-osztály-szelektorok | .menu, [type="text"], :hover, :nth-child(2) |
| C típus | elem- (típus-) szelektorok és pszeudo-elemek | p, li, ::before |
Két szelektor összevetésekor balról jobbra haladunk: először az A oszlopot hasonlítjuk össze, és csak egyenlőség esetén nézzük a B-t, majd a C-t. Ezért 1-0-0 erősebb, mint 0-12-0: egyetlen ID legyőz akárhány osztályt. Nem számít: a csillag (*), a kombinátorok (szóköz, >, +, ~), és a :where() teljes tartalma.
PRÓBÁLD KI
Specificitás-számoló
A :is(), a :not() és a :has() a legerősebb argumentumának specificitását kapja, a :where() mindig 0-0-0. A :where()-t ezért alapstílusokhoz használjuk: bármilyen egyszerű szabály felülírja.
3. FEJEZET
Ki nyer? – élő példa
Az alábbi bekezdésre öt szabály vonatkozik, mindegyik más színt adna. Kapcsold ki-be a szabályokat, add hozzá a style attribútumot vagy egy !important-ot, és figyeld, melyik győz. A szöveg színét a böngésző valóban így számolja ki – a magyarázat mellette ugyanezt a döntést vezeti le lépésenként.
PRÓBÁLD KI
Öt szabály, egy bekezdés
<div class="doboz"><p id="cel" class="hir kiemelt">Az !important nem „végtelen erős”: ha több !important deklaráció ütközik, közöttük ugyanúgy a specificitás, majd a sorrend dönt. Ha mindenhová !important kerül, visszajutottunk a kiindulóponthoz – csak nehezebben javítható kóddal. Inkább írj pontosabb szelektort, vagy rendezd át a szabályokat.
4. FEJEZET
Döntetlen esetén a sorrend dönt
Ha két szabály specificitása megegyezik, a később leírt nyer. Ez a stíluslapon belüli sorrendre és a stíluslapok betöltési sorrendjére (<link> elemek) is igaz.
PRÓBÁLD KI
Két egyforma erős szabály
ÖSSZEFOGLALÁS
Gyakori szelektorok erőssége
| Szelektor | Specificitás (A-B-C) | Megjegyzés |
|---|---|---|
* | 0-0-0 | univerzális szelektor |
:where(.kartya) p | 0-0-1 | a :where() nem számít |
p, ::before | 0-0-1 | típus-szelektor, pszeudo-elem |
ul li | 0-0-2 | két típus-szelektor |
.gomb, [type="text"], :hover | 0-1-0 | osztály, attribútum, pszeudo-osztály |
a.gomb:hover | 0-2-1 | |
#fejlec | 1-0-0 | azonosító |
:is(#fo, .oldalsav) p | 1-0-1 | a legerősebb argumentum számít |
style="…" | – | nem specificitás: minden stíluslapbeli szelektort megelőz |
!important | – | külön lépés: a jelölés nélküli deklarációkat előzi meg |
- Sorrend a döntésben: fontosság →
styleattribútum → specificitás → sorrend. - A specificitás három szám, balról jobbra hasonlítjuk össze.
- Jó gyakorlat: alacsony, egyenletes specificitás (főleg osztályok), kevés ID a stíluslapon,
!importantcsak kivételesen.