Formátování vnořených elementů

Nejprve jsme se naučili "ukázat" stylem na existující HTML element. Naučili jsme se pro formátování označit text elementem span či oddíl dokumentu elementem div. Víme, že všechny tyto elementy můžeme zahrnout do tříd nebo jim přiřadit identifikátory. Máme ale ještě další možnost, jak konkretizovat element dokumentu, na který se naše formátování má vztahovat - do stylu můžeme uvést nejen daný element, ale také ten, ve kterém má být umístěn. Bude-li v dokumentu na jiném místě, styl se na něj nebude vztahovat.

Poněkud krkolomný popis si lépe vysvětlíme na příkladu. V HTML je jeden odkaz v seznamu a jeden v odstavci. Ve stylu i bez použití tříd snadno odlišíme formátování těchto dvou odkazů, jen podle jejich umístění.

<ul>
<li>zde je <a href='soubor.htm'>odkaz</a> umístěný v seznamu</li>
</ul>
<p>A tady je <a href='soubor.htm'>odkaz</a>, který je v odstavci.</p>

K tomuto HTML dokumentu připojíme příslušný styl:

a {
font-weight: bold
}
ul a {
color: green;
background-color: yellow;
}
p a {
color: blue;
background-color: silver;
}

Na příkladu 2 se můžete podívat, jak se to projeví ve stránce. Ve stylu je nejdřív nastaveno, že každý odkaz, bez ohledu na umístění či třídu, bude tučný. Další dvě části pak definují odlišné formátování pro odkaz umístěný v seznamu či odstavci.

Tímto způsobem můžete snadno naformátovat odlišně třeba odkazy v menu, které označíte příslušnou třídou. Můžete jednoduše naformátovat vícenásobně vnořené seznamy. Můžete odlišit formátování textu třeba u fotografie od běžného textu. Sami jistě přijdete na další vhodné využití - a pamatujte, že můžete do stylu klidně uvést více než dva vnořené elementy. Za zápisem div.obsah p a.hover tedy bude styl, který se bude aplikovat při najetí myší na každý odkaz, který je uvnitř odstavce p, který musí být uvnitř elementu div s třídou obsah.


Firefox: Prohlížeč, kterému můžete věřit
píše -dis- bb(zavináč)choltice.eu