Mi az a specifikusság a CSS-ben?

A CSS-ben a specifikusság egy mechanizmus, amely meghatározza, hogy melyik stílus szabály alkalmazódik egy elemre, ha több szabály is érvényes rá.

Minden szelektor saját specifikussági pontszámmal rendelkezik. Egy magasabb pontszám magasabb prioritást jelent.

A specifikusság számítása a következő komponensek számán alapul a szelektorban (csökkenő fontossági sorrendben):

• Százak (1000): !important-tal jelölt szabályok (a legmagasabb prioritásúak, de használatukat nem javasolt).
• Százak (100): Inline stílusok (közvetlenül a HTML elem style attribútumában írva).
• Százak (100): Azonosítók (pl. #sajat-elem).
• Tízesek (10): Osztályok (pl. .osztaly), pszeudóosztályok (pl. :hover, :focus), attribútumok (pl. [type="text"]).
• Egyesek (1): Elem típusok (HTML tagek nevei, pl. div, p), pszeudóelemek (pl. ::before, ::after).
• Nulla (0): Univerzális szelektor (*), összekötők (>, +, ~), szülő szelektorok (:not(), :is(), :where()) önmagukban nem növelik a specifikusságot, de befolyásolhatják a zárójeleken belüli értékeket.

Példa a számításra:

• p { ... } - Specifikusság: 0-0-0-1
• .sajat-osztaly { ... } - Specifikusság: 0-0-1-0
• #sajat-id { ... } - Specifikusság: 0-1-0-0
• div.sajat-osztaly { ... } - Specifikusság: 0-0-1-1
• ul > li.osztaly[data-id="1"] { ... } - Specifikusság: 0-0-2-2 (li, ul = 2; .osztaly, [data-id="1"] = 2)

Ha két szabály ugyanakkora specifikussággal rendelkezik, akkor az alkalmazandó, amelyik a CSS fájlban alul helyezkedik el.

Példa:

/* style.css fájl */
.sajat-elem {
  szin: kék; /* Specifikusság: 0-0-1-0 */
}

#elem-id {
  szin: piros; /* Specifikusság: 0-1-0-0 */
}

.sajat-elem {
  font-weight: bold; /* Specifikusság: 0-0-1-0, felülírja az előző szabályt ugyanazzal a specifikussággal */
}

Ebben az esetben a #elem-id azonosítójú elem szövege piros lesz, míg a sajat-elem osztályú elem szövege kék és félkövér (a kék felülíródik a pirossal a magasabb specifikusság miatt).

A specifikusság megértése fontos a kiszámítható és könnyen karbantartható CSS írásához. Kerülje a túlzottan összetett specifikusságot és az !important használatát a stílusok jobb kezelése érdekében.