CSS ÇOCUK SEÇİCİLERİ (DIRECT CHİLD SELECTORS)

Bir HTML elemanı altında bulunan elemanlardan Torun seçiciler hariç yalnızca çocuk seçiciler için bir tanımlama yapmak için kullanılır.

Örneğin aşağıda verilen HTML sayfasında p elemanı altında kullanılan b elemanı ilk satırda çocuk seçici iken ikinci satırda torun seçicidir.

<p>Bu bir<b> deneme</b> yazısıdır.</p>

<p>Bu<i> bir<b> deneme</b></i> yazısıdır.

Çocuk seçici için yapılan tanımlamalarda >(büyüktür) işareti kullanılır.

Yukarıda ki HTML sayfasında ki parağrafın çoçuk elamanına style tanımlaması yapalım.

CSS:

p > b{color:blue}

ÇIKTI:

Ebeveyn-çocuk ilişkisini daha iyi anlamak için yukarda ki örnek hazırlanmıstır. a elemanı em'in ebeveynidir. p elemanıda a elemanının ebeveynidir. Ancak p elemanı em'in ebeveyni degildir. Biz burada p > a ve a > em şeklinde tanımlama yapabiliriz ancak p > em tanımlamasını yapamayız.

Birde aynı seçici içinde hem torun birlestiricisini hemde çocuk birleştiricisini kullanabiliriz.

p a > em{color:green}