Stylování prvního a posledního potomka v CSS

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... }

.prvni { styly... }
.druhy { styly... }
.treti { styly... }
.ctvrty { styly... }