CSS není jen o znalosti atributů a jejich vykreslení v tom či jiném prohlížeči - CSS skrývá i spoustu dalších úskalí. Denně přicházím do kontaktu s weby, jejichž stylové předpisy mají 30 kilobytů či více, a věřte nevěřte, jsou i případy, kdy se přidání nebo smazání některé globální definice rovná píchnutí do vosího hnízda. 

Někdy totiž nestačí pouze vyladění pro nejpoužívanější prohlížeče - člověk musí znát i způsoby zápisu té samé definice a prioritu, kterou bude mít oproti definicím ostatním. Říká se, že poslední definice platí... 

A já se ptám: Kdo za to dá ruku do ohně?

1.) Mějme následující HTML kód:

<div id="all" class="all">
  <p id="test" class="test">&nbsp;</p>
</div>

K němu se z připletl takovýto CSS předpis:

#all p {border:1px solid black;}
#test {border:1px solid blue;}
.test {border:1px solid red;}
div p {border:1px solid green;}

A já se ptám: Jakou barvu bude mít rámeček? Proč?

2.) Zápis trochu obměníme. Nyní se bude prohlížeč rozhodovat pouze mezi dvěmi definicemi:

#all .test {border:1px solid green;} 
.all #test {border:1px solid orange;}

Jakou barvu bude mít rámeček nyní? Proč zrovna tu?

3.) Styly opět změníme. Je spousta možností, jak definici zapsat:

#all #test {border:1px solid violet;}
body .all #test {border:1px solid red;}
html body div p {border:1px solid orange;}
html body .all .test {border:1px solid yellow;}

Že nevíte, na co se zeptám?

4.) A na konec něco trochu jednoduššího:

.test {border:1px solid blue;}
div .test {border:1px solid red;}
p {border:1px solid brown;}

Dříve, než se podíváte dále do článku na řešení, zkuste si tipnout, jak tomu bude. Která vlastnost se projeví? Zkuste také odhadnout, která vlastnost bude mít druhou nevyšší prioritu.

Stejně tak, jak se říkají malým dětem pohádky o princovi, který zabije draka a zachrání princeznu (dá si pár piv a odjede na harleyi... pardon), tak se i malým webmasterům říkají pohádky o poslední CSS definici, která platí. Ve světe "dospěláků" tomu ale tak není. Ani s princeznou, ani se styly.

Obecně se říká, že nejvyšší prioritu má identifikátor. V prvním případě ale roztrhne cílovou pásku kaskádová definice. Rámeček bude černý, a černým i zůstane. Identifikátor by tady obsadil až místo druhé. Za ním třída a jako poslední obecná definice pro odstavec v divu. Zde má tedy poslední definice prioritu nejnižší. Ať už řádky jakkoli obměníme, priority zůstanou stejné.

Podívejme se na druhou ukázku. V obou kaskádových definicích je zmíněna jak třída, tak IDčko. Ti z Vás, kteří tipovali oranžovou měli pravdu. Rámeček bude oranžový. V tomto případě jako v jediném ale platí pravidlo poslední definice: změníme-li pořadí, rámeček bude zelený.

Třetí bod je asi nejzáludnější. Jednotlivé definice můžeme jakkoli přeházet, rámeček bude ale vždy fialový. První řádek přebije všechny ostatní, protože je v něm vyjmenován největší počet identifikátorů vedoucí k prvku, kde se má vlastnost projevit. Další pořadí je jasné: jeden identifikátor je silnější než dvě třídy, dvě třídy zase silnější než vyjmenování elementů. Pořadí nehraje ani v nejmenším roli.

Na čtvrtou otázku už snad odpovídat ani nemusím, chování bude stejné jako v prvním případě - rámeček bude červený.

Tak jak jste uspěli? Umíte dobře CSS