Příklad – dědění vlastností

Pro tuto stránku jsem definoval dvě pravidla:

#tojeon { color: red; }
.modre  { color: blue; }

Na konci najdete zformátovaný odstavec s tímto zdrojovým kódem:

<p id="tojeon" class="modre">Pokusný odstavec a v něm
<em class="modre">zvýrazněný text</em>. Do
<em>běžného zvýraznění</em> se barva pochopitelně zdědí.</p>

Jak vidíte, odstavec samotný vyhovuje oběma pravidlům – má přidělen identifikátor „tojeon“ a zároveň patří do třídy modre. Jelikož identifikátor má při posuzování konkrétnosti větší váhu, zvítězí první pravidlo a text bude červený. Tuto barvu zdědí i všechny vnořené prvky, jimž ji žádné pravidlo nedefinuje.

To ale není případ prvního <em>, které je zařazeno do třídy modre. To znamená, že na toto <em> se vztahuje druhé pravidlo (nikoli první, protože prvku <em> není přiřazen identifikátor „tojeon“) a přidělí mu modrou barvu.

Konkrétnost zděděné a přiřazené vlastnosti se navzájem neporovnávají (například zde zděděná vlastnost pochází od konkrétnějšího pravidla). Jakmile je prvku přiřazena vlastnost, byť libovolně obecným pravidlem, dědičnost se vůbec nebere v úvahu a porovnají se jen pravidla přiřazující vlastnost přímo zkoumanému prvku.

A teď důkaz místo slibů:

Pokusný odstavec a v něm zvýrazněný text. Do běžného zvýraznění se barva pochopitelně zdědí.

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