Kapitoly:
Stylování prvního potomka (třeba v ul li seznamu) je velmi jednoduché:
ul li:first-child { styly... }first-child je funkční již od verze CSS2. last-child je funkční až od verze CSS3:
ul li:last-child { styly... }Použití třídy class (#class)
Mnohem jednodušší je ale přidat k položce li nějaký class už v HTML - př.:
<li class="treti">Třetí položka seznamu</a>a pak ho nastylovat v CSS takto:
.treti { styly... }nebo takto:
ul li.treti { styly... }případně takto:
li.treti { styly... }
Kombinování třídy s first-child a last-child (#kombinovani)
Výhodou řešení při použití class je možnost nastylovat nejenom první a poslední položku, ale klidně i nějkaou mezi nimi - třetí, prostřední, atd... První a poslední položku tedy můžeme stylovat pomocí child a ostatním nastavit třídy class:
<ul>
<li>První</li>
<li class="druhy">Druhý</li>
<li class="treti">Třetí</li>
<li>Čtvrtý</li>
</ul>CSS by tedy vypadalo nějak takhle:
ul li:first-child { styly... }
ul li.druhy { styly... }
ul li.treti { styly... }
ul li:last-child { styly... }
Použití pouze tříd class (#jen-class)
Mnohem spolehlivější je však přidat třídy všem položkám a nespoléhat se na first-child a last-child. HTML tedy bude vypadat:
<ul>
<li class="prvni">První</li>
<li class="druhy">Druhý</li>
<li class="treti">Třetí</li>
<li class="ctvrty">Čtvrtý</li>
</ul>Potom můžeme libovolně stylovat v CSS:
ul li.prvni { styly... }
ul li.druhy { styly... }
ul li.treti { styly... }
ul li.ctvrty { styly... }Případně jednodušeji bez definice, že se stylování týká pouze seznamu UL LI:
.prvni { styly... }
.druhy { styly... }
.treti { styly... }
.ctvrty { styly... }Závěrem chci říct, že tam, kde můžete zasahovat do HTML, raději používejte třídy class. Protože starší explorery neznají first-child, ani last-child.
