:last-childSeçici onun içeren öğesinin içinde doğrudan son öğe hedef sağlar. CSS Seçiciler Seviye 3 spesifikasyonunda "yapısal sözde sınıf" olarak tanımlanmıştır, yani içeriği ana ve kardeş içeriğiyle olan ilişkisine göre biçimlendirmek için kullanılır.
Diyelim ki bir makalemiz var ve içeriğin bir sonucu olarak son paragrafı küçültmek istiyoruz (bir editörün notu gibi):
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Last paragraph…
Bir sınıf (örneğin .last) kullanmak yerine, :last-childonu seçmek için kullanabiliriz :
p:last-child ( font-size: 0.75em; )Kullanımı :last-childçok benzer, :last-of-typeancak kritik bir farkla: daha az spesifiktir. HTML'de son ölü gelmese bile :last-child, bir üst öğenin yalnızca son alt öğesiyle last-of-typeeşleşmeye çalışacak, belirtilen öğenin son oluşumuyla eşleşecektir. Yukarıdaki örnekte, sonuç aynı olacaktır, çünkü öğesinin son çocuğu articleda son punsurdur. Bu, şunun gücünü ortaya çıkarır :last-child: sadece aynı türden kardeşlerle değil, tüm kardeşleriyle ilişkili bir öğeyi tanımlayabilir.
Aşağıdaki daha eksiksiz örnek, :last-childve ilgili bir sözde sınıf seçicisinin kullanımını göstermektedir :first-child.
Tarayıcı Desteği
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Hiç | 3.2+ | Hiç | 9.5+ | 9+ | Hiç | Hiç |
:last-childCSS Seçiciler Modül 3'te tanıtıldı, yani tarayıcıların eski sürümleri onu desteklemiyor. Bununla birlikte, modern tarayıcı desteği kusursuzdur ve yeni sözde seçiciler, üretim ortamlarında yaygın olarak kullanılmaktadır. Daha eski bir tarayıcı desteğine ihtiyacınız varsa, ya IE için çoklu doldurma ya da bu seçicileri, tavsiye edilen aşamalı geliştirme gibi kritik olmayan şekillerde kullanın.