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çicilerTorun 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.
frontend okulu Kalın Yazı Kalın Yazı2Span 1
- Liste 1
- Liste 2
Eğik yazı
Kalın yazı
Span 2
Eğik yazı2
Span3
Ç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.