Tato stránka je oblažena následující trojicí CSS pravidel:
ul li { color: blue; background-color: silver; }
/* skóre specifičnosti selektoru (0, 0, 2) */
ul ul li { color: green; }
/* (0, 0, 3) */
.cervene { color: red; }
/* (0, 1, 0) */
Všechna pocházejí od autora stránky, z hlediska původu tedy mezi nimi není rozdíl. Při uplatňování bude rozhodovat konkrétnost. Níže pak najdete formátovanou podobu následujícího XHTML kódu:
<ul>
<li>První položka, obsahuje vnořený seznam:
<ul>
<li>První vnořená položka.</li>
<li class="cervene">Druhá vnořená položka.</li>
<li>Třetí vnořená položka. a ještě jedna úroveň vnoření:
<ul>
<li>Raz.</li>
<li>Dva.</li>
<li>Tři.</li>
</ul>
</li>
</ul>
</li>
<li>Druhá položka.</li>
</ul>
Položky seznamu nejvyšší úrovně vyhovují jen prvnímu pravidlu, jejich barva tedy musí být modrá.
Na položky seznamů druhé a třetí úrovně se vztahuje jak první, tak druhé pravidlo. Jejich selektory neobsahují žádné identifikátory ani třídy, jen prvky a těch má druhé pravidlo víc než první. Příslušná skóre specifičnosti jsou (0, 0, 2) a (0, 0, 3). Druhé pravidlo je konkrétnější, proto dostane přednost a text těchto položek bude zelený.
Prostřední položka druhého seznamu je zařazena do třídy „cervene“, což znamená, že se na ni vztahují všechna tři pravidla. Vyhraje třetí, protože počet tříd (kde vede 1:0) má při posuzování konkrétnosti větší význam, než počet prvků (kde prohrává 0:2 a 0:3). Dotyčná položka proto bude červená.
Připomínám, že konflikt mezi pravidly se posuzuje pro každou vlastnost samostatně. Pozadí všech položek proto bude světle šedé – je definováno jen v jediném pravidle, jehož selektoru vyhovují položky všech našich seznamů. Při posuzování této vlastnosti žádný konflikt nevzniká, je jen jedno pravidlo, jež ji nastavuje, proto bude použita jím určená hodnota.
A na závěr formátovaný výsledek:
zpět: CSS – co má přednost