CSS BİTİŞİK VE GENEL KARDEŞ SEÇİCİLER

Kardeş seçiciler Bitişik ve Genel olarak Temelde iki çeşittir. Adından da anlaşılacağı gibi kardeş seçiciler aynı seviyede HTML etiketler içinde kardeş hedef için kullanılır. Adjacent sibling selectors-Bitişik kardeş seçici artı(+) işareti ile gösterilir. Her iki elemanların aynı üst ve alt öğeleri olduğu anlaşılmaktadır ve doğrudan seçici olarak ilk öğe olan sadece hedef elemanı seçilecektir. Aşağıdaki örnekte h1 etiketi tarayıcı bulacak kardeş sadece bir paragraf seçilecektir.

CSS:

h1+p{color:blue}

HTML:

<div>

<h1>içerik</h1>

<p>içerik</p> <!--(hedef yazı mavi olacak)-->

<p>içerik</p>

<h2>içerik</h2>

</div>

Bitişik Kardeş Seçicileri biribiri ardına gelen aynı seviyedeki elementlerden sonra gelenine stil tanımlamak için kullanılır. Şemayı inceleyelim.h2,h3,p aynı seviye HTML etiketleridir. h2 kardeş seçicisi h3'dir.

CSS:

li:first-of-type + li {
  color: red;
}

HTML:

<ul>
  <li>One</li>
  
  <li>Two</li> <!--Yazı kırmızı olur-->
  
  <li>Three</li>
  
</ul>

CSS'de General sibling selectors-Genel kardeş seçici Bitişik kardeş seçicisine göre daha seçici ve kullanışlı bir seçicidir. Aynı kapsayıcıya sahip elemanların belirtilen elemandan sonraki aynı seviyedeki elemanların tümünü yakalamak için kullanılır. Burada dikkat edilmesi gereken konu belirtilen elemandan sonraki aynı seviyedeki elemanları seçiyor olması. Tanımlama yaparken araya işaret olarak tilde(~) yazıyoruz.

CSS:

h1~p{color:blue}
 

HTML:

<div>

<h1> içerik </h1>

<p> içerik </p> <!--(yazı mavi)-->

<p> içerik </p> <!--(yazı mavi)-->

<h2>başlık </h2>

<aside>
  <h1> içerik </h1>

  <h2> içerik </h2>

  <p> içerik </p> <!--(yazı mavi)-->
</aside>

</div>
</code>

ÇIKTI: