XHTML + CSS – 26 lekcia – selectory – rodič – potomok

Každý html kód vieme rozčleniť z hľadiska rodičov a potomkov, majme jednoduchý html kód napr.:

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Z tohto jednoduchého kódu vidíme, že head a body sú potomkami rodiča html, ďalej title je potomok rodiča head.

Pri programovaní html stránok sa už len tieto vzťahy prehlbujú. Keď náš kód dosiahne určitú hĺbku, zložitosť a my chceme aplikovať css stáva sa táto činnosť zložitejšia a zložitejšia. Využitím klasického prístupu pridávania nových pomenovaní class, alebo id pre elementy robí situáciu iba zbytočne komplikovanú a tak trochu báni univerzálnosti použitia jednotlivých tried class. V návode je tak demonštrované použitie tried autor a datum. Triedy sú použité viac krát, využitie rodičovsko – potomkovského vzťahu nám umožňuje  aplikovať rozširujúce css presne pre konkrétne elementy v daných podmienkach. Aplikujeme tu akýsi podmienený vzťah formou ak je rodič clanok tak aplikuj rozširujúce css pre datum aj autor. Čím robíme použitie css jednoduchšie, tento spôsob zároveň prináša vyššiu mieru univerzálnosti do celkového prevedenia.

Rodičovský vzťah sa v css definuje veľmi jednoducho, rodiča a potomka oddelíme medzerou a tým vyslovíme akúsi všeobecnú podmienku napr.:

.clanok .autor {naseCss}

Ak autor je akýkoľvek potomok (prvej, druhej až nekonečnej generácie) (syn, vnuk, pravnuk) clanok aplikuj preňho naseCss.

Keby sme chceli vyjadriť špeciálnu podmienku vo formáte ak je autor syn clanok tak uvedieme znamienko > (väčší ako), čo vyjadruje potomstvo iba prvej generácie. Napr.:

.clanok > .autor {naseCssPreSyna}

Zanechajte komentár