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:

içerik

içerik

içerik

içerik

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:

  • One
  • Two
  • Three

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:

içerik

içerik

içerik

başlık

ÇIKTI:

css

Adınız

Eposta

Mesaj

3244

Güvenlik No

REKLAM
KATEGORİ
POPÜLER MAKALE