Selektory :first-child a :last-child
Pro zaměření první/poslední položky v CSS lze místo přidávání tříd použít :first/last-child.
1
minuta
Kromě starších Internet Explorerů (tam jde doplnit podporu JavaScriptem) funkční ve všech běžných prohlížečích.
CSS
.test span:first-child {color: blue;}
.test span:last-child {color: red;}
HTML
<div class='test'> <span>Odkaz 1 (:first-childmodře od IE 7)</span> <span>Odkaz 2</span> <span>Odkaz 3</span> <span>Odkaz 4</span> <span>Odkaz 5 (:last-childčerveně od IE 9)</span> </div>
Další selektory
Seznam všech CSS selektorů je na samostatné stránce.
Co si myslíte o tomto článku?
Diskuse
Související články
CSS item-pack: balance – vyvážené rozložení flex položek
Vlastnost item-pack: balance rozděluje flex položky rovnoměrně mezi řádky, podobně jako text-wrap: balance vyvažuje řádky textu.
11
minut
CSS Container Queries – responsivní komponenty
Jak pomocí @container, container-type a container-name vytvářet komponenty, které se přizpůsobí velikosti svého rodiče místo viewportu.
16
minut
CSS Anchor Positioning – posicování elementů relativně k jiným
Jak pomocí anchor-name, position-anchor a funkce anchor() posicovat elementy relativně k jiným bez JavaScriptu.
6
minut
Centrování na webových stránkách
Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.
8
minut