Arkadaşlar bu yazımızda CSS kardeş ( sibling ) seçiciler ( selector ) i nasıl kullanacağımızı anlatacağız. CSS kardeş ( sibling ) seçiciler i genel sibling ve bitişik sibling seçiciler diye ikiye ayırarak anlatacağız.
Not: Yazımızda kardeş etiket olgusunu kullanacağımız için bunun ne olduğundan bahsedelim. Kardeş etiket demek aynı seviyede bulunan etiketlerdir. Kod ile örnek verelim.
<body>
<div>Kardeş etiket.</div>
<h1>Kardeş etiket.</h1>
<p>Kardeş etiket.</p>
<span>Kardeş etiket.</span>
<div>Kardeş etiket.
<p>Çocuk Etiket.</p>
</div>
</body>CSS Genel Sibling ( Kardeş ) Seçiciler
Sibling Seçici, kardeş seçici demektir. Yani belirttiğimiz bir elementin kardeşini veya kardeşlerini seçmeye olanak sağlar. CSS Genel sibling ( kardeş ) seçiciler kullanılırken belirttiğimiz elementten sonra “~” karakteri kullanılır ve daha sonra seçmek istediğimiz kardeş etiket belirtilir. Belirtiğimiz özellikteki bütün kardeşleri seçer.
Örnek 1:
<!DOCTYPE html>
<html>
<head>
<style>
h4 ~ p{
color:red;
}
</style>
</head>
<body>
<h2>Sibling Seçiciler</h2>
<p>Örnek bir paragraf.</p>
<h4>Sibling Seçiciler</h4><!-- bu etiketten sonraki bütün p etiketleri -->
<p>Örnek bir paragraf.</p>
<h4>Sibling Seçiciler</h4>
<p>Örnek bir paragraf</p>
<span> deneme yazısı</span>
<p>Örnek bir paragraf.</p>
</body>
</html>Tarayıcıdaki Sonuc:
Yukarıdaki örneğimizde gördüğümüz gibi h4 etiketinin kardeşlerini seçmiş oluyoruz. “h4~p” dediğimizde h4 etiketinden sonra gelecek bütün p etiketlerini seçer. Araya başka etiketler girmesi önemli değil. Kardeş olması yeterlidir. Çocuk etiketi p olsaydı onun rengi değişmezdi. Yani onu seçmemiş oluruz.
Yukarıdaki örnekte ki kodda body içindeki bütün etiketler kardeş etiketlerdir.
Örnek 2:
<!DOCTYPE html>
<html>
<head>
<style>
h4 ~ p{
color:red;
}
</style>
</head>
<body>
<h2>Sibling Seçiciler</h2>
<p>Örnek bir paragraf.</p>
<h4>Sibling Seçiciler</h4>
<p>Örnek bir paragraf.</p>
<h4>Sibling Seçiciler</h4>
<div>
<p>Örnek bir paragraf</p>
</div>
<span> deneme yazısı</span>
<p>Örnek bir paragraf.</p>
</body>
</html>Tarayıcıdaki Sonuc:
Bu örnekte tek fark bir p etiketini çocuk etiket yaptık. Çocuk etiketi gördüğümüz gibi seçmedi. Sadece belirtiğimiz kardeş etiketleri seçer.
Örnek 3:
<!DOCTYPE html>
<html>
<head>
<style>
h4.deneme1 ~ p.deneme2{
color:red;
}
</style>
</head>
<body>
<h2>Sibling Seçiciler</h2>
<p>Örnek bir paragraf.</p>
<h4>Sibling Seçiciler</h4>
<p>Örnek bir paragraf.</p>
<h4 class="deneme1">Sibling Seçiciler</h4>
<div>
<p>Örnek bir paragraf</p>
</div>
<span> deneme yazısı</span>
<p class="deneme2">Örnek bir paragraf.</p>
</body>
</html>Tarayıcıdaki Sonuc:
Burada class global özelliği de kullanarak bir örnek yapmış olduk.
CSS Bitişik Sibling Seçiciler
CSS bitişik kardeş ( Sibling ) seçiciler i kullanırken belirttiğimiz elementten sonra “+” karakterini yazarız ve sonra seçmek istediğimiz elementi belirtiriz. Belirtilen etiketten sonraki özelliklere uyan ilk element seçilir.
Örnek 1:
<!DOCTYPE html>
<html>
<head>
<style>
h4 + p{
color:red;
}
</style>
</head>
<body>
<h2>Sibling Seçiciler</h2>
<p>Örnek bir paragraf.</p>
<h4>Sibling Seçiciler</h4>
<p>Örnek bir paragraf.</p>
<h4 class="deneme1">Sibling Seçiciler</h4>
<div>
<p>Örnek bir paragraf</p>
</div>
<span> deneme yazısı</span>
<p class="deneme2">Örnek bir paragraf.</p>
</body>
</html>Tarayıcıdaki Sonuc:
Yukarıdaki örnekte gördüğümüz gibi h4 etiketine bitişik kardeşi sadece kırmızıya çevirdi.
Örnek 2:
<!DOCTYPE html>
<html>
<head>
<style>
h4 + p.deneme2{
color:red;
}
</style>
</head>
<body>
<h2>Sibling Seçiciler</h2>
<p>Örnek bir paragraf.</p>
<h4>Sibling Seçiciler</h4>
<p class="deneme2">Örnek bir paragraf.</p>
<h4 class="deneme1">Sibling Seçiciler</h4>
<div>
<p>Örnek bir paragraf</p>
</div>
<h4 class="deneme1">Sibling Seçiciler</h4>
<p class="deneme2">Örnek bir paragraf.</p>
</body>
</html>Tarayıcıdaki Sonuc:
Bu örnekte h4 etiketinden sonraki class ı deneme2 olan p etiketlerini seçelim dediğimizde şartlara uyan iki tane h4 ve class ı deneme2 olan p olduğu için iki tane kırmızıya dönüştürülen p etiketi oluyor.
Not: Özet olarak genel sibling seçiciler de “~” karakteri kullanılır ve belirttiğimiz etiketten sonraki seçilen bütün kardeş etiketleri kapsar. Bitişik sibling seçiciler de ise “+” karakteri kullanılır ve belirttiğimiz etiketten sonraki seçilen ilk eleman seçilir. Yani bitişik olan eleman seçilir.
Diğer Seçici Yazılarımız
- Genel Seçici (*) ler, tüm Html elemanlarını seçmemize olanak verir. Seçmeyi “*” karakteri ile yaparız.
- Element Seçici (Element), seçtiğimiz Html Elementini seçer. Yani seçmek istediğimiz elementi yazarız ve seçmiş oluruz.Örneğin <h1> elementini seçmek için “h1” yazmak gibi.
- ID Seçici (#ID), Html elementine yazdığımız ID ile seçeriz. Elementlerin “id” attribute değerine bir isim veririz ve o isimi CSS de kullanırız.
- Class Seçici (.class), Html elementine yazdığımız class ile seçeriz. Elementlerin “class” attribute değerine bir isim veririz ve o isimi CSS de kullanırız. Birden fazla elemente aynı class ı verebiliriz.
- Child Seçici (Element>Element), Html etiketinin altındaki (çocuk) elementi seçmek için.
- Descendant Seçici(Element Element), Html etiketinin altındaki (torun düzeyinde) descendant elementi seçmek için.
- Çoklu (Multiple) Seçici (Element, Element), Bir veya daha fazla Html etiketlerini seçebiliriz.
- Attribute ( Özellik)Seçici (Element[özellik-adı]), Html Etiketini özellik değeri ile seçmemize olanak veriyor.
- CSS Sözde Sınıf (Pseudo Class) Seçiciler, sınıf olmayıp sınıf gibi davranan ve seçim yapmamızı sağlayan yapılardır.
- CSS Sözde Element(Pseudo Element) Seçiciler, Element olmayıp element gibi davranan ve seçim yapmamızı sağlayan yapılardır.
Başka bir yazımızda buluşmak dileğiyle…
