Css Group Selectors - Css Dersleri

[VexraDev]

Daha önceki konularda selector kavramının id, classes ve etiket ismine göre seçimleri anlatmıştım ancak bunlardan başka selector seçenekleri mevcut.

Bu konu içerisinde Group Selectors kavramından bahsedeceğim.

Css Group Selector' larını bir kapsam içinde aradığımız etiketler için kullanıyoruz. Örneğin farklı seviyelerde olan bir <p> etiketini düşünelim ;

<div>
   <p id="first"> </p>
   <p class="description"> </p>
</div>

<p> </p>



ve bu etiketlerden sadece div altındaki p etiketlerine ulaşmak istiyorsak bu durumda group selectors' ları kullanmamız gerekiyor.



[CODE]div p {
   /* div altındaki tüm p etiketleri */
}

div #first{
   /* div altında id' si first olan eleman */
}

div .description{
   /* div altında class' ı description olan eleman */
}

Diğer group selector kullanımları ;

1: (*) = Tüm etiketler için.
2: (p) = Tüm p etiketleri için.
3: (div p) = Div etiketi içindeki tüm p etiketleri için.
4: (div,p) = Tüm div etiketi ve p etiketleri için.
5: (div > p) = Üst etiketi div etiketi olan tüm p etiketleri için.
6: (p ~ div) = P etiketi ile aynı seviyede olan tüm div etiketleri için.
7: (p + div) = P etiketinden sonra gelen tüm div etiketleri için.