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>
Copy
.output, #left, section{
  background-color: plum;
}
Copy

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>
Copy
article span{  // Bunu seçer ✔️
  color: red; 
}
article p{ // Bunu da seçer ✔️
  color: orange; 
}
Copy

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>
Copy
article > span{  // Bunu seçmez ❌
  color: red; 
}
article > p{ // Fakat bunu seçer ✔️
  color: orange; 
}
Copy

(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  ❌ -->
Copy
h1 + p{
  color: red;
}
Copy

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  ✔️ -->
Copy
h1 ~ p{
  color: red;
}
Copy

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.

CSS Nedir?

Standart bir söz vardır; "HTML bir bina ise CSS onun boyası, tasarımı, iç ve dış kaplamasıdır." Bir web sayfasının tasarımından sorumlu olan konudur. CSS kelimesinin tam açılımı "Cascading Style Sheets" şeklindedir. Türkçe anlamı ile "Basamaklı Stil Şablonu" anlamına gelmektedir. Basamaklı olmasının nedeni kodların yukarıdan aşağıya, sağdan sola doğru sıralı şekilde okunması sebebiyledir. CSS aslında mükemmeldir, zira renksiz, karanlık, siyah beyaza mâhkum olan yazılımı adeta renkli cıvıl cıvıl bir hâle getirir. Özellikle günümüz web sitelerinin kullanıcılarını cezbedebilmesi için CSS konusuna ciddi ve gerekli değerler yazılımcı arkadaşlar tarafından kesinlikle verilmelidir. Aksi hâlde web siteniz kullanıcıların beğenisine kavuşmaz ve kullanıcı kaybedebilirsiniz. Tabi bir sitenin kalitesini gösteren tek etken CSS değil l...