Příklad – konkrétnost pravidel

Tato stránka je oblažena následující trojicí CSS pravidel:

ul li      { color: blue; background-color: silver; }
ul ul li   { color: green; }
.cervene { color: red; }

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. Jelikož druhé je konkrétnější (jeho selektor obsahuje tři prvky, zatímco první jen dva), 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: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:

• První položka, obsahuje vnořený seznam:
  • První vnořená položka.
  • Druhá vnořená položka.
  • Třetí vnořená položka. a ještě jedna úroveň vnoření:
    • Raz.
    • Dva.
    • Tři.
• Druhá položka.

zpět: CSS – co má přednost