CSS ~ Genel Kardeş Seçici Nedir?

Yükleniyor

CSS’deki Sibling Selector – Genel Kardeş Seçici nedir, ne işe yarar öğrenelim.

Genel Kardeş Seçici (~) CSS2.1 ile hayatımıza giren güzel bir özellik. first-child kullanılarak da yapılabilecek bir işlemi daha az kodla yapabilmemize olanak sağlıyor. First-child ve nth-child’ı daha sonra bir makalemde anlatmayı planlıyorum.

Örneğin yukarıdaki gibi bir liste yapmak istiyoruz, ancak liste elemanlarının her birinin değil, sadece aralarında çizgi olmasını istiyoruz. sadece li’lere css değeri girersek ilk elemana da bu özellik ekleneceğinden bunu yapamıyoruz. Bu durumda devreye kardeş seçiciler giriyor.

<pre data-language="css">li ~ li{
    border-top:1px solid #f00;
}

li ~ li değeriyle, li’den sonra gelen li’leri (yani liste elemanlarını) hedef aldık ve border-top ile üstlerine bir çizgi attık.
Eğer first-child ile bu işlemi yapmaya çalışsaydık şöyle bir kod yazacaktık:

</pre>
<pre data-language="css">li{
    border-top:1px solid #f00;
}

li:first-child{
    border-top:0
}
}

Kısacası, ~ Genel Kardeş Seçicileri ile kod fazlalığından ve zamandan tasarruf sağlayabiliyoruz.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir