Kaszkád és specificitás

1Amikor két szabály ütközik

Egy valódi stíluslapban gyakran több szabály is vonatkozik ugyanarra az elemre. Egy bekezdésre hathat egy p szabály, egy .bevezeto szabály és egy .kartya p szabály is. Ha ezek ugyanazt a tulajdonságot állítják be különböző értékre, a böngészőnek döntenie kell.

<p>Milyen színű lettem?</p>

p {
  color: blue;
}

p {
  color: crimson;
}

Ez eddig egyszerű. De mi van akkor, ha a két kijelölő nem egyforma? Erről szól a lecke többi része.

2Ami nem ütközik, összeadódik

Fontos tisztázni: a böngésző nem egész szabályok között választ, hanem tulajdonságonként. Ha két szabály különböző tulajdonságokat állít be, akkor nincs ütközés — mindkettő érvényesül.

<p class="kiemelt">
  Figyeld meg, honnan jön a stílusom!
</p>

p {
  color: blue;
  font-size: 20px;
  font-style: italic;
}

.kiemelt {
  color: crimson;
  background-color: #fef3c7;
  padding: 8px;
}

3A kaszkád három lépése

A kaszkád (vízesés, lépcsőzetesség) az a szabályrendszer, ami eldönti, ki nyer egy ütközésnél. A böngésző sorban megy végig ezeken a kérdéseken, és az első olyan lépésnél megáll, ahol eldől a verseny.

4A sorrend

Kezdjük a legegyszerűbbel, a harmadik lépéssel. Ha két szabály egyforma erős, a később szereplő nyer. „Később" alatt nemcsak a fájlon belüli sorrendet értjük:

<button class="gomb">Mentés</button>
<button class="gomb">Mégse</button>

/* ===== ALAPBEÁLLÍTÁS ===== */
.gomb {
  background-color: #6b7280;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
}

/* ===== KÉSŐBBI MÓDOSÍTÁS ===== */
.gomb {
  background-color: #be123c;
}

5A specificitás

A specificitás azt méri, mennyire pontosan céloz egy kijelölő. A logika hétköznapi: minél konkrétabban nevezel meg valamit, annál inkább rád kell hallgatni. „Minden bekezdés" gyengébb utasítás, mint „a kiemelt osztályú bekezdések", és az is gyengébb, mint „pontosan az a bekezdés, amelyiknek ez az azonosítója".

A pontozás: három oszlop

A böngésző minden kijelölőt három számmal jellemez. Megszámolja, hány darab található benne az egyes fajtákból:

Hogyan hasonlítunk össze két értéket?

Balról jobbra, oszloponként — pontosan úgy, ahogy egy sportversenyen az aranyérmek számítanak először, és az ezüstöket csak akkor nézik, ha aranyból egyforma a mérleg.

1. Akinek több azonosítója van, az nyer. Ha egyforma, tovább:
2. Akinek több osztálya van, az nyer. Ha egyforma, tovább:
3. Akinek több eleme van, az nyer. Ha ez is egyforma: döntetlen → a sorrend dönt.

<div>
  <p class="kiemelt">Milyen színű lettem?</p>
</div>

/* 0 – 1 – 0 */
.kiemelt {
  color: crimson;
}

/* 0 – 0 – 2 */
div p {
  color: blue;
}

<p id="bevezeto" class="szoveg">
  Három szabály versenyez értem.
</p>

/* 1 – 0 – 0 */
#bevezeto {
  color: crimson;
}

/* 0 – 1 – 1 */
p.szoveg {
  color: green;
}

/* 0 – 0 – 1 */
p {
  color: blue;
}

6Specificitás a gyakorlatban

Gyakorolj! Takard le a jobb oldali oszlopot, és számold ki magad a specificitást.

A döntetlen

Két különbözően megírt kijelölőnek is lehet pontosan ugyanakkora a specificitása. Ilyenkor a sorrend dönt — és ez gyakran okoz meglepetést.

<div class="kartya">
  <p class="ar">3 490 Ft</p>
</div>

/* 0 – 1 – 1 */
p.ar {
  color: crimson;
  font-weight: bold;
}

/* 0 – 1 – 1 — ugyanannyi! */
.kartya p {
  color: gray;
}

7Inline stílus és !important

A style attribútum

A 12. leckében láttuk, hogy CSS-t közvetlenül az elemre is írhatsz a style attribútummal. Ez erősebb bármilyen kijelölőnél — még egy azonosítónál is. Gondolj rá úgy, mint egy negyedik, mindent megelőző oszlopra.

<p id="cim" style="color: green;">
  Milyen színű lettem?
</p>

/* 1 – 0 – 0 */
#cim {
  color: crimson;
}

Az !important kulcsszó

Van egy vészfék: ha egy érték után odaírod, hogy !important, az a deklaráció a kaszkád első lépésében nyer — megelőzve minden specificitást és még az inline stílust is.

<p id="cim" class="szoveg"
   style="color: green;">
  Milyen színű lettem?
</p>

#cim {
  color: crimson;
}

/* 0 – 1 – 0, DE !important */
.szoveg {
  color: orange !important;
}

8Öröklődés

Eddig arról volt szó, mi történik, ha több szabály vonatkozik egy elemre. Most nézzük a fordítottját: mi van, ha egy sem?

Ilyenkor bizonyos tulajdonságok a szülőtől öröklődnek. Ha a body elemnek megadod a betűtípust, az oldal összes szövege azt fogja használni — nem kell minden bekezdésnek, címsornak és listaelemnek külön megadnod.

<div class="doboz">
  <h3>Címsor a dobozban</h3>
  <p>Bekezdés, benne egy
    <strong>kiemelt</strong> szóval.</p>
</div>

.doboz {
  /* ezek öröklődnek */
  color: #be123c;
  font-family: Georgia, serif;

  /* ezek NEM öröklődnek */
  border: 3px solid #be123c;
  padding: 12px;
  background-color: #fff5f7;
}

Az inherit kulcsszó

Ha egy olyan tulajdonságot, ami magától nem öröklődne, mégis a szülőtől szeretnél átvenni, írd értéknek: inherit.

.kartya p {
  border-color: inherit;   /* vedd át a szülő keretszínét */
}

9Örökölt érték vagy célzott szabály?

Ez a lecke legmeglepőbb szabálya, és a legtöbb „megmagyarázhatatlan" CSS-hibát ez okozza:

<div id="tartalom">
  <h3>Címsor</h3>
  <p>Milyen színű a bekezdés?</p>
</div>

/* 1 – 0 – 0 — a SZÜLŐRE vonatkozik */
#tartalom {
  color: crimson;
}

/* 0 – 0 – 1 — közvetlenül a p-re */
p {
  color: blue;
}

A klasszikus eset: a link

Ez magyarázza az egyik leggyakoribb kezdő kérdést: „Miért nem lett piros a link, ha a szülőjének piros színt adtam?"

<p class="figyelmeztetes">
  Ez a szöveg bordó. Ez pedig egy
  <a href="#">link a mondatban</a>,
  ami nem lesz bordó.
</p>

<p class="figyelmeztetes jav">
  Itt viszont a
  <a href="#">link is átveszi</a>
  a színt.
</p>

.figyelmeztetes {
  color: #be123c;
  font-weight: bold;
}

/* a megoldás */
.jav a {
  color: inherit;
}

10Nyomozás az F12-vel

A jó hír: nem kell fejben számolgatnod. A böngésző fejlesztői eszköze pontosan megmutatja, mi történt. Jobb gomb az elemen → Vizsgálat (Inspect), majd a jobb oldali panel:

11A jó stratégia

Az egész lecke egyetlen gyakorlati tanácsba sűríthető: tartsd alacsonyan és egyenletesen a specificitást. Ha a legtöbb szabályod nagyjából egyforma erős, a sorrend dönt — azt pedig te irányítod.

#oldal .tartalom div.kartya p {
  color: gray;
}
/* később nem működik, tehát: */
.kiemelt {
  color: crimson !important;
}

.kartya-szoveg {
  color: gray;
}
/* később, ugyanakkora erővel: */
.kartya-szoveg.kiemelt {
  color: crimson;
}

12Összefoglalás