CSS - co má přednost

Když už teď víte něco o selektorech, snadno si jistě dokážete představit situaci, kdy několik pravidel přiřazuje stejné vlastnosti stejného prvku různé hodnoty. Ostatně, příklad jste již viděli. Vezměme třeba dvojici pravidel:

ul li      { color: blue; background-color: gray; }
ul ul li   { color: green; }

Každý prvek, který vyhovuje druhému, vyhovuje zároveň i prvnímu (druhé je přísnější, chce aby <li> bylo obsaženo v <ul> a to v dalším <ul>, zatímco prvnímu vyhoví každé <li> uvnitř <ul>).

Jaká vlastně bude barva položek neuspořádaných seznamů druhé úrovně? Modrá nebo zelená?

Podle původu a důležitosti

První kritérium posuzuje pravidla podle toho, odkud pocházejí. Může je uvést jak autor stránky, tak uživatel v konfiguraci svého klienta. Kromě toho každý klient má vestavěnu určitou sadu pravidel definujících jeho implicitní chování.

Počet variant ještě zvyšuje, že jak autor stránky, tak uživatel mohou některé přiřazení hodnoty prohlásit za důležité, když do hodnoty vloží „!important“ – například pravidlo

h1 { font-size: xx-large !important; }

říká, že prvek <h1> má být zobrazen velmi velkým písmem a že to je důležité.

Žebříček podle původu a důležitosti vypadá následovně:

1. Implicitní pravidla v klientovi.
2. Obyčejná pravidla zadaná uživatelem.
3. Obyčejná pravidla zadaná autorem stránky.
4. Důležitá pravidla (!important) zadaná autorem stránky.
5. Důležitá pravidla (!important) zadaná uživatelem.

Když klient rozhoduje o hodnotě určité vlastnosti konkrétního prvku, nejprve shrne všechna pravidla, která ji určují. Z nich pak do dalšího rozhodování ponechá jen ta, jež na uvedeném žebříčku dosáhla nejvyšší hodnoty.

Pokud například pro určení barvy <h1> existuje jedno pravidlo v implicitní klientově konfiguraci, dvě obyčejná přiřazená autorem a jedno důležité zadané uživatelem, ponechá si jen to poslední. Díky tomu mu zbyde jen jediné pravidlo a o hodnotě vlastnosti je rozhodnuto.

Všimněte si jednoho důsledku uvedeného pořadí: pro autora CSS předpisu stránky nemá valný smysl používat !important. Na „přebití“ obyčejné uživatelské definice stačí obyčejná autorská, zatímco důležitá uživatelská má přednost i před důležitou autorskou.

Pokud po vyhodnocení původu zůstane několik pravidel pocházejících z nejdůležitějšího zdroje, bude se pokračovat v jejich posuzování podle následujících kritérií.

Podle konkrétnosti

Obecně platí, že pravidlo s konkrétnějším selektorem má přednost před pravidlem obecnějším. Podrobněji řečeno se pravidla posuzují podle následujících kritérií v uvedeném pořadí. Pravidla, která jsou v daném kritériu slabší než nejsilnější, jsou z uvažování vyřazena.

Kritéria konkrétnosti jsou následující:

1. Definice v atributu style daného prvku mají přednost před pravidly v externím souboru či prvku <style>.
2. Počet identifikátorů v selektoru.
3. Počet tříd, pseudotříd a dalších atributů v selektoru.
4. Počet prvků a pseudoprvků v selektoru.

Vrátím se k příkladu ze začátku stránky a ještě jej trochu rozvinu – zde je řešení.

Podle pořadí

Jestliže nerozhodne ani předchozí krok a zůstane několik pravidel se stejnou důležitostí i mírou konkrétnosti, rozhodne jednoduše jejich pořadí. Bude uplatněno to, které je ve stylovém předpisu poslední. Můžete si to představovat tak, že přepíše hodnoty přiřazené jeho předchůdci.

Dědičnost

Řada vlastností je dědičných. Přiřadíte-li je prvku, zdědí ji i jeho potomci (prvky obsažené v jeho těle). Například nastavíte-li prvku <p> zelenou barvu, zdědí ji i prvky <em> či <strong>, jež uvnitř něj vyznačují důležité části.

Ovšem pozor – dědičnost funguje jen v případě, že na dotyčný prvek se nevztahuje žádné pravidlo, které by mu danou vlastnost nastavilo. V opačném případě se hodnota vlastnosti určí výše popsaným způsobem a ke zdědění nedojde. Podívejte se na příklad.