CSS Kombine veya Kompleks Seçiciler
CSS konusuna hakim kişilerin işini kolaylaştıran müthiş yapılardır. Sürekli ID veya Class değeri kullanmak yerine (HTML içerisinde belirtmek yerine) CSS tarafında yapılan küçük müdahaleler ile istenilen elemente doğrudan erişim sağlayabilmektedir. Kendi içerisinde 5 farklı maddeden oluşmaktadır. Bunlar: Gruplandırma, Alt Öğe (Descendant), Doğrudan Alt Öğe (child), Bitişik Kardeş Tekil (Adjancent Sibling), Genel Kardeş Çoğul (General Sibling) şeklindedir.
1) Gruplandırma:
Aynı CSS özellikleri birden çok HTML elementine verilmek isteniyorsa "class", "id", "element" fark etmeksizin "," işareti ile gruplandırılabilir.
<span class='output'></span>
<div id='left'></div>
<section></section>.output, #left, section{
background-color: plum;
}Yukarıdaki yazım tarzı ile CSS gruplandırma işlemini yapabilirsiniz.
2) Alt Öğe (Descendant)
Eğer bir elementin içersinde çocuğun çocuğu varsa biz bu durumda, dede element ile torun elemente doğrudan erişim imkanı vermektedir.
<article>
<h1><span>Title</span></h1>
<p>blabla</p>
</article>article span{ // Bunu seçer ✔️
color: red;
}
article p{ // Bunu da seçer ✔️
color: orange;
}Yani ana ebeveyn içerisindeki ister torun olsun, ister evlat, isterse torun torun torun olsun :) yukarıdaki yazım tarzı ile o elemente erişim sağlamak mümkündür.
3) Doğrudan Alt Öğe (Child)
"Descendant" yapısından farklı olarak sadece ve sadece elementin çocuğunu seçer. Eğer ebeveny elementin torununu seçmek istiyorsak bu yöntem ile seçmek mümkün değildir! > işareti ile kullanılmaktadır.
<article>
<h1><span>Title</span></h1>
<p>blabla</p>
</article>article > span{ // Bunu seçmez ❌
color: red;
}
article > p{ // Fakat bunu seçer ✔️
color: orange;
}(Descendant) ile (child) arasındaki fark sadece > işaretidir.
4) Bitişik kardeş (Adjacent Sibling) seçiciler:
HTML elementinin kardeş olması durumunda, alt alta gelen elementlerden sadece bir tanesini seçer bu nedenle "Genel Kardeş (Genaral Sibling)" den farklıdır. "+" işareti ile birlikte kullanılmaktadır. + işaretini yapmak için "SHIFT + 4" üste bulunan 4 sayısına basmak gerekmektedir.
<h1>Title</h1>
<p>Paragraf</p> <!-- Sadece bunu seçer ✔️ -->
<p>Paragraf</p> <!-- Fakat bunu seçmez ❌ -->h1 + p{
color: red;
}Sadece ilk tanımlı olan "p" elementini seçecektir.
5) Genel Kardeş (General Sibling)
Bitişik kardeş (Adjacent Sibling)'den farklı olarak arka arkaya gelen kardeşlerin hepsini seçer. Tabi kardeşten maksat "p" elementidir veya ikinci sırada belirtilen değerdir. Tilda ~ işareti ile gösterilmektedir. Tilda işaretini yapmak için CTRL + ü tuşlarına 2 kere basmak gerekmektedir.
<h1>Title</h1>
<p>Paragraf</p> <!-- Hem bunu seçer✔️ -->
<p>Paragraf</p> <!-- Hem de bunu ✔️ -->h1 ~ p{
color: red;
}Böylelikle eğer bir elementten sonra gelen ve türü aynı olan birden çok elementi seçmek mümkündür.
CSS'te bulunan diğer seçim türlerini görüntülemek için CSS'te Seçim Yöntemleri isimli ana yazımıza bakmanızı tavsiye etmekteyiz.