CSS Szelektorok és a Specificitás

A szelektorok a CSS nyelv célkeresztjei. Ezekkel mondjuk meg a böngészőnek, hogy a HTML dokumentum melyik elemét akarjuk formázni. Ha nem érted a szelektorok logikáját, a kódod hamar egy átláthatatlan, egymást felülíró káosszá válik.

A 3 Alapvető Szelektor

1. Az Elem (Tag) Szelektor

A legegyszerűbb szelektor. Közvetlenül a HTML tag nevére hivatkozik. Ha ezt használod, az oldalon lévő összes olyan taget formázni fogja.

/* Az oldalon lévő ÖSSZES bekezdés szürke lesz */
p {
    color: gray;
}

2. Az Osztály (Class) Szelektor

A webfejlesztők legjobb barátja. A HTML-ben bármelyik elemnek adhatunk egy class attribútumot. A CSS-ben az osztályokat egy ponttal (.) jelöljük. Egy osztályt korlátlan számú elemen használhatsz az oldalon.

<!-- HTML kód -->
<p class="kiemelt-szoveg">Ez egy fontos bekezdés.</p>
<h2 class="kiemelt-szoveg">Ez egy fontos alcím.</h2>

/* CSS kód */
.kiemelt-szoveg {
    color: red;
    font-weight: bold;
}

3. Az Azonosító (ID) Szelektor

Az ID egy egyedi azonosító. A HTML-ben az id attribútummal adjuk meg, a CSS-ben pedig egy kettőskereszttel (#) hivatkozunk rá. Aranyszabály: Egy adott ID csak egyetlen egyszer szerepelhet egy HTML dokumentumban!

<!-- HTML kód -->
<nav id="fo-menu">...</nav>

/* CSS kód */
#fo-menu {
    background-color: black;
}

A CSS Specificitás (A Kasztrendszer)

Mi történik akkor, ha egy HTML elemre több, egymásnak ellentmondó CSS szabály is vonatkozik? Melyik fog nyerni? Ezt dönti el a Specificitás (pontérték rendszer).

Nézzük ezt a HTML kódot:

<p class="szoveg" id="egyedi-bekezdes">Milyen színű leszek?</p>

És ezt a CSS kódot:

p { color: blue; }          /* Elem szelektor */
.szoveg { color: green; }   /* Class szelektor */
#egyedi-bekezdes { color: red; } /* ID szelektor */

A bekezdés piros lesz. Miért? Mert a böngésző pontokat oszt a szelektoroknak:

• Elem szelektor (p): 1 pont (Leggyengébb)
• Class szelektor (.szoveg): 10 pont (Közepes)
• ID szelektor (#egyedi-bekezdes): 100 pont (Legerősebb)
• Inline CSS (style="..."): 1000 pont (Brutális)

A fejlesztői rémálom: Az !important

Létezik egy "atombomba" a CSS-ben, az !important kulcsszó. Ha ezt odaírod egy érték mögé, az minden specificitási szabályt felülír, még az inline CSS-t is.

p { color: blue !important; } /* Ez minden mást elpusztít */

Szakmai tanács: Soha, de soha ne használd az !important-ot, hacsak nem egy külső (harmadik féltől származó) plugin CSS-ét kell felülírnod, amihez nincs hozzáférésed. Ha a saját kódodban elkezded használni, heteken belül egy átláthatatlan, karbantarthatatlan káoszt fogsz kapni, ahol a szabályok folyamatosan ütik egymást.