Mit tud a CSS-szelektorok specifikusságáról?

A specifikusság határozza meg a CSS-szabályok prioritását konfliktus esetén, amikor különböző stílusokat alkalmaznak ugyanarra az elemre. Minden szabályhoz kiszámítják.

A specifikusság egy numerikus értékelés, amely négy kategóriából áll (A, B, C, D), és 0,0,0,0-ként írják le. Minél nagyobb a szám, annál magasabb a specifikusság.

Kategóriák:

• A (soron belüli stílus): Az HTML elem style attribútumával megadott stílusok. Legmagasabb specifikussággal rendelkeznek (például, 1,0,0,0).
• B (azonosító): Az ID szelektorok (például, #sajat-azonosito). Növelik a második számot (például, 0,1,0,0).
• C (Osztály, attribútum, pseudo-osztály): Osztály szelektorok (például, .sajat-osztaly), attribútum (például, [type="text"]), pseudo-osztály (például, :hover, :first-child). Növelik a harmadik számot (például, 0,0,1,0).
• D (Elem, pseudo-elem): HTML tag szelektorok (például, div, p) és pseudo-elem (például, ::before, ::after). Növelik a negyedik számot (például, 0,0,0,1).

Példa számítás:

• p - 0,0,0,1
• .sajat-osztaly - 0,0,1,0
• #sajat-azonosito - 0,1,0,0
• div p - 0,0,0,2 (két elem specifikációinak összege)
• #sajat-azonosito .sajat-osztaly - 0,1,1,0 (ID és osztály összege)
• div#sajat-azonosito.sajat-osztaly:hover - 0,1,2,1 (elem, ID, osztály és pseudo-osztály összege)

Szabályok:

1. A soron belüli stílus specifikussága mindig magasabb, mint bármilyen más szelektor kombinációja, kivéve az !important zászlóval ellátott szabályokat.
2. Az !important zászlóval ellátott szabályok a legmagasabb prioritással rendelkeznek, felülírva még a soron belüli stílust is. Az !important használata nem ajánlott a hibakeresés nehézsége miatt.
3. Azonos specifikusság esetén az utolsó CSS fájlban deklarált szabály érvényesül.
4. Az univerzális szelektor (*) és a :where() specifikussága 0,0,0,0, és nem növeli a teljes specifikusságot.

/*
  Specifikusság: 0,0,0,1
  Akkor alkalmazandó, ha nincs magasabb specifikusságú szabály
*/
p {
  color: blue;
}

/*
  Specifikusság: 0,0,1,0
  Felülírja a p elemre vonatkozó szabályt
*/
.text {
  color: green;
}

/*
  Specifikusság: 0,1,0,0
  Felülírja a .text osztály szabályát
*/
#fő-szoveg {
  color: red;
}

/*
  Specifikusság: 1,0,0,0
  Akkor alkalmazandó, ha az elemnek van az attribútuma `style="color: purple;"`
*/
/* <p style="color: purple;">Szöveg</p> */

/*
  Nagyon magas specifikusság, felülír mindent
  Nem ajánlott használni, kivéve ha feltétlenül szükséges
*/
.override-text {
  color: black !important;
}