A :last-childválasztó lehetővé teszi, hogy az utolsó elemet közvetlenül a benne lévő elemen belül célozza meg. A CSS Selectors 3. szintű specifikációja „strukturális ál-osztályként” definiálja, vagyis a tartalom stílusához használják a szülő és a testvér tartalmához való viszony alapján.
Tegyük fel, hogy van egy cikkünk, és szeretnénk az utolsó bekezdést kisebbé tenni, hogy következtetésként szolgáljunk a tartalomra (például egy szerkesztő megjegyzése):
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…
Osztály (pl. .last) Helyett :last-childkiválaszthatjuk:
p:last-child ( font-size: 0.75em; )A használata :last-childnagyon hasonló, :last-of-typede egy kritikus különbséggel: kevésbé specifikus. :last-childcsak egy szülőelem legutolsó gyermekével próbál meg egyeztetni, míg last-of-typea megadott elem utolsó előfordulásával, még akkor is, ha a HTML-ben nem utoljára jelenik meg. A fenti példában az eredmény ugyanaz lenne, csak azért, mert az utolsó gyermek articleis történetesen az utolsó pelem. Ez feltárja az erejét :last-child: képes azonosítani egy elemet az összes testvérével, nemcsak az azonos típusú testvérekkel.
Az alábbiakban bemutatott teljesebb példa bemutatja a :last-childkapcsolódó pszeudo-osztály választó használatát :first-child.
Böngésző támogatás
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| Bármi | 3.2+ | Bármi | 9.5+ | 9+ | Bármi | Bármi |
:last-childa CSS Selectors 3. moduljában vezették be, ami azt jelenti, hogy a böngészők régi verziói nem támogatják. A modern böngészőtámogatás azonban kifogástalan, és az új álválasztókat széles körben használják a gyártási környezetekben. Ha régebbi böngészőtámogatásra van szüksége, vagy töltse ki az IE-t, vagy használja ezeket a választókat nem kritikus módon, fokozatosan továbbfejlesztve, ami ajánlott.