CSS :first-child ve :last-child

Sayfamızda kullandığımız bir tablo ya da listenin ilk ve son satırlarının farklı görünmesini istiyorsak :first-child ve :last-child sözde sınıflarını kullanabiliriz.

# :first-child Kullanımı

:first-child tablo ya da listenin ilk satırlarının görünümünü değiştirmek için kullanılır.

<style>
ul li:first-child {
    background-color: red;
}
</style>

<ul>
    <li>liste</li>
    <li>liste</li>
    <li>liste</li>
    <li>liste</li>
</ul>

Çıktısı:

# :last-child Kullanımı

:last-child  tablo ya da listenin son satırlarının görünümünü değiştirmek için kullanılır.

<style>
ul li:last-child {
    background-color: green;
}
</style>

<ul>
    <li>liste</li>
    <li>liste</li>
    <li>liste</li>
    <li>liste</li>
</ul>

Çıktısı: