CSS’de, çocuk seçici ve torun seçici farklı öğeleri hedeflemek için kullanılan iki önemli seçicidir. Bu seçiciler arasındaki farklar, öğelerin yerleşimi ve stil uygulamalarını etkiler.
Çocuk Seçici (>)
Çocuk seçici, bir öğenin doğrudan alt öğelerini hedeflemek için kullanılır. Yani, sadece belirli bir öğenin doğrudan çocuklarına stil uygulamak için kullanılır. Eğer bir öğe başka bir öğe içinde iç içe geçmişse ve sadece doğrudan alt öğelere stil uygulanmak isteniyorsa, çocuk seçici tercih edilir.
Örnek:
1 2 3 4 5 | div > p { color: red; } |
Yukarıdaki örnekte, sadece div öğesinin doğrudan p çocuk öğeleri kırmızı renkte olacaktır. Eğer div içinde başka p öğeleri varsa ama onlar doğrudan alt öğe değilse, onlara stil uygulanmaz.
Torun Seçici (Boşluk)
Torun seçici ise, bir öğenin herhangi bir seviyedeki alt öğelerini seçmek için kullanılır. Bu, çocuk öğelerin yanı sıra daha derin seviyelerdeki öğeleri de kapsar.
Örnek:
1 2 3 4 5 | div p { color: blue; } |
Bu örnekte, div öğesi içerisindeki tüm p öğeleri mavi renkte olacaktır, ister doğrudan çocuk olsun ister daha derin bir seviyede yer alsın.
Özet
- Çocuk seçici (
>) sadece doğrudan çocuk öğeleri hedefler. - Torun seçici (boşluk) ise, öğenin herhangi bir seviyedeki alt öğelerini seçer.
Yorum Yap