Jak se aplikují styly 2
To, která hodnota platí, je o něco složitější, než jen pravidlo, že poslední nastavení hodnoty přepisuje předchozí. Záleží to totiž ještě na specificitě.
To, která hodnota platí, je o něco složitější, než jen pravidlo, že poslední nastavení hodnoty přepisuje předchozí. Záleží to totiž ještě na specificitě.
Specificita je síla selektoru.
Pokud nějakou vlastnost nastavuješ v CSS tomu samému elementu víckrát, tak platí hodnota nastavená pomocí silnějšího (specifičtějšího) selektoru.
Teprve pokud je specificita selektorů, kterými si vybrala nějaký prvek, stejná, aplikuje se pravidlo o tom, že platí poslední nastavená hodnota.
Silnější selektor má více tříd, než selektor slabší.
Pokud mají dva selektory stejný počet tříd, tak silnější je ten s větším počtem tagů.
Pokud budeme mít takovéhle HTML, …
<div>
<p class="tip">obsah</p>
</div>
… tak element odstavce lze vybrat pomocí těchto tří selektorů:
.tip { color: red; }
p { color: green; background-color: lightgray; }
div p { color: blue; font-style: italic; }
obsah
Nejsilnější je ten první (jedna třída), pak ten třetí (žádná třída a dva tagy) a nakonec ten druhý (žádná třída a jeden tag), proto je text červeně, přestože je ta hodnota pro ten samý element přepsána ještě dvakrát.
Specificita může být ještě složitější, ale zatím by sis měla vystačit s tímto.