GELİŞMİŞ CSS SEÇİCİLER 1 (TORUN, ÇOCUK VE KARDEŞ SEÇİCİLER)

CSS ile hiyerarşik yapıdaki bir HTML kodlarındaki nesnelere torun, çocuk ve kardeş isimli gelişmiş seçiciler ile ulaşılabilir. Bu seçiciler için boşluk, > + ve ~ karakterleri kullanılılır.

Torun Seçiciler

Torun seçicileri kullanmak için boşluk karakteri kullanılır.
Örnek: div li yazıldığında div içindeki tüm li elemanları seçilir.

Çocuk Seçiciler

Çocuk seçicileri kullanmak için > karakteri kullanılır.
Örnek: div > li yazıldığında div içindeki ilk seviyedeki tüm li elemanları seçilir.

Kardeş Seçiciler

İlk kardeş seçici ve tüm kardeşleri seçici olarak ikiye ayrılır. İlk kardeş seçiciyi kullanmak için + karakteri kullanılır.
Örnek: div + li yazıldığında div ile aynı seviyede bulunan ilk li elemanı seçilir.Diğer li elemanları seçilmez.
Tüm kardeş seçici için ise ~ elemanı kullanılır.
Örnek: div ~ li yazıldığında div ile aynı seviyede bulunan tüm li elemanları seçilir.
Aşağıdaki yapının HTML kodları şu şekildedir. <div id="kutu1"> <p> <a href="http://www.frontendokulu.com">frontend okulu</a> <strong>Kalın Yazı</strong> <strong>Kalın Yazı2</strong> </p> <span>Span 1</span> <ul> <li>Liste 1</li> <li>Liste 2 <em>Eğik yazı</em> <strong>Kalın yazı <span>Span 2</span> <em>Eğik yazı2</em> </strong> <br> <span>Span3</span> </li> </ul> </div> Torun Seçici : Örnekte #kutu1 em yazıldığındığında kutu1 in içindeki tüm em elemanları seçilir.
Çocuk Seçiçi :Örnekte li > span yazıldığındığında li nin içindeki ilk seviyedeki tüm span'lar seçilir.
İlk Kardeş Seçici : Örnekte a + strong yazıldığındığında a elemanının yanındaki ilk strong seçilir.
Tüm Kardeş Seçici : Örnekte a ~ strong yazıldığındığında a elemanının yanındaki tüm strong nesneleri seçilir.


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın