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

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:

css

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

1290

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.