CSS Çocuk Seçiciler (Child Selector) Nasıl Kullanılırlar?
CSS çocuk seçiciler (child selector), bazı durumlarda keyfi olarak bir torun seçicisi kullanmaktansa daha ayrıntılı bir ayrım yapmak istediğimiz zamanlarda kullanılıralr. Örneğin bir h1 elemanının altındaki strong elemanlarından sadece çocuk elemanı için tanımlamalar yapmak istersek (torun elemanları hariç), bunun için çocuk bağlayıcısını kullanırız. ( > büyüktür işareti )
Bunu bir örnek uygulama ile gösterelim.
<html>
<head>
<title>CSS'in yapısı</title>
<style type="text/css">
h1 > strong {
color: red
}
</style>
</head>
<body>
<h1>Bu <strong>koda</strong> uygulanacaktır.</h1>
<h1>Bu <em>koddaki <strong> bu kısım </strong></em> uygulama
dısıdır..</h1>
</body>
</html>
Yukarıdaki kodların ekran görünüşü aşağıdaki gibi olacaktır.
Yukarıdaki durumda sadece ilk strong elemanı için tanımlama gerçekleşecektir. İkincisi için herhangi bir stil tanımı uygulanmayacaktır. Çünkü ikinci strong em elemanının çocuğu ancak h1 elemanının torunudur.
Yukarıda ana örneğimizin bir kısmı gösterilmektedir. Ebeveyn-çocuk ilişkisini daha iyi anlamak için hazırlanmıştır. a elemanı strong‘un ebeveynidir. p elemanı da a elemanının ebeveynidir. Ancak p elemanı alttaki strong‘un ebeveyni değildir. Biz burada p > a ve a > strong seklinde tanımlama yapabiliriz ancak p > strong tanımlamasını yapamayız.
Birde aynı seçici içinde hem torun birleştiricisini hem de çocuk birleştiricisini kullanabiliriz.
Bir örnek ile gösterelim.
table.summary td > p
CSS çocuk seçiciler (child selector) konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/css/
Sosyal Medya Hesaplarımız
