Bu yazımızda CSS Child (Çocuk) seçiciler ve CSS Descendant ( Torun ) seçiciler in ne olduğunu ve nasıl kullanıldığını anlatacağız.
CSS Child ( Çocuk ) Seçiciler
Child seçici, dilimizde çocuk seçici anlamındadır. CSS de bir Html etiketinin bir altındaki elementleri seçmek için kullanılır.
Örneğin <div> etiketinin altındaki <p> etiketlerinin özelliklerini değiştirmek istediğimizde css de ” div > p ” yazarak ulaşmış oluyoruz. Bu işleme css child (Çocuk) seçiciler denir. Yani <div> etiketi ebeveyn, <p> etiketleri çocuk oluyor…
Örnek Kod:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div > h1{ /* div in çocugu h1 seçtik */
color:red;
}
div > p{ /* div in çocukları p leri seçtik */
color:blue;
}
</style>
</head>
<body>
<div>
<h1> Örnek Başlık </h1>
<p> Örnek paragraf 1. </p>
<p> Örnek paragraf 2. </p>
</div>
<span>
<p> Örnek paragraf 3. </p>
</span>
</body>
</html>Tarayıcıdaki Sonucu:
Yukarıdaki örnekte gördüğümüz gibi div etiketinin çocuklarını seçtik ve özelliklerini değiştirdik. CSS de ” div > p ” ile p etiketlerini seçtik ve renklerini mavi yaptık. Burada span etiketinin içindeki p etiketinde herhangi bir değişiklik olmadı. Onu seçmek seçmemiz içinde CSS de ” span > p ” yazarak yapılır.
Bir örnekte ID ve Class kullanarak yapalım.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#denemeID > h1{ /* div in çocuğu h1 seçtik */
color:red;
}
#denemeID > p{ /* id si denemeID olan div in çocukları p leri seçtik */
color:blue;
}
.deneme-class > p{ /* class i deneme olan div in çocukları p leri seçtik */
color:purple;
}
p > span { /* p in çocuğu span ı seçtik */
font-style:italic;
}
</style>
</head>
<body>
<div id="denemeID">
<h1> Örnek Başlık </h1>
<p> Örnek paragraf 1. </p><!-- class="paragraf" -->
<p> Örnek paragraf 2. </p><!- -->
</div>
<div class="deneme">
<p> Örnek paragraf 3. </p><!-- class="paragraf" -->
<p> Örnek <span> paragraf </span> 4. </p><!- -->
</div>
</body>
</html>Tarayıcıdaki Sonucu:
Yukarıda da görüldüğü gibi bir elemanın bir altındaki elemanı seçme olayıdır.
CSS Descendant ( Torun-Soy ) Seçiciler
Descendant ( Torun-Soy ) Seçiciler, CSS de bir Html etiketinin altındaki veya iki ve daha fazla alttaki elemanları seçmek için kullanılır.
Örneğin menu Html inde genel de ul etiketi ve onun içinde li etiketi onun içinde a etiketi kullanılır. Burada a etiketi torun oluyor. Bunu seçmek için CSS de ” ul a ” dememiz yeterlidir.
Örnek Kod:
<!DOCTYPE html>
<html>
<head>
<style>
ul a{ /* ul nin altıdaki bütün a etiketlerini etkiler */
text-decoration:none;
color:blue;
}
ul > li > a { /* ul nin altıdaki li nin altındaki a etiketlerini etkiler */
color:red;
}
</style>
</head>
<body>
<div id="denemeID">
<ul>
<li>
<a href="#">
HTML
</a>
</li>
<li>
<a class="deneme-class" href="#">
CSS
</a>
</li>
<li>
<a href="#">
JS
</a>
</li>
<a> Web Tasarım </a>
</ul>
<a> Grafik Tasarım </a>
<p>
<a class="deneme-class">
Photoshop
</a>
</p>
</div>
</body>
</html>Tarayıcıdaki Sonucu:
Yukarıdaki örnekte gördüğümüz gibi css de descendant seçiciler kullanırken arada karakter olmadan boşluk bırakarak yapıyoruz. Yukarıda ki örnekte css de yazdığımız “ul a” ile “HTML CSS JS ” metinlerinin renkleri de mavi yapıyor. Ama daha sonraki “ul>li>a” seçimi rengi kırmızıya çeviriyor.
Bundan sonraki örneklerimizde aynı Html sayfasında sadece CSS kodlarımızı değiştireceğiz.
Örnek :
div a{
text-decoration:none;
color:red;
}Yukarıdaki örnekte, “div” in altıdaki bütün <a> etiketlerini etkiler. Yani <div etiketinin altındaki çocuk, torun, soy ağacında ne kadar a etiketi varsa hepsini seçmiş oluyoruz. Aşağıdaki sonuçta da gördüğünüz gibi bütün a etiketlerini kırmızı yapıyor
Tarayıcıdaki Sonucu:
Örnek :
#denemeID a {
text-decoration:none;
color:violet;
}Tarayıcıdaki Sonucu:
Yukarıdaki örnekte, bir üstteki örnek ile aynı seçimi yapar. Çünkü bir üstteki örnekte <div> in altındaki tüm <a> etiketlerini seçmiştik, bu örnek aynı div i ID si ile seçip altındaki tüm a etiketlerini seçmiş olduk. Sadece farklı renk verdik .
Örnek :
div a.deneme-class {
text-decoration:none;
color:orange;
}Tarayıcıdaki Sonucu:
Bu örnekte ise <div> etiketinin altındaki class ı “deneme-class” olan <a> etiketlerini seçmiş oluyoruz. Aşağıdaki sonuçta da rengi turuncu olanlardan görülüyor…
Arkadaşlar bu örnekleri sınırsız sayıda artırılabilir ama bu kadar yeterlidir. Eğer anlamadığınız bir yer veya sorularınız olursa iletişim formundan yazabilirsiniz.
Diğer Seçici Yazılarımız
- Genel Seçici (*) ler, tüm Html elemanlarını seçmemize olanak verir. Seçmeyi “*” karakteri ile yaparız.
- Element Seçici (Element), seçtiğimiz Html Elementini seçer. Yani seçmek istediğimiz elementi yazarız ve seçmiş oluruz.Örneğin <h1> elementini seçmek için “h1” yazmak gibi.
- ID Seçici (#ID), Html elementine yazdığımız ID ile seçeriz. Elementlerin “id” attribute değerine bir isim veririz ve o isimi CSS de kullanırız.
- Class Seçici (.class), Html elementine yazdığımız class ile seçeriz. Elementlerin “class” attribute değerine bir isim veririz ve o isimi CSS de kullanırız. Birden fazla elemente aynı class ı verebiliriz.
- Genel Kardeş (Sibling) Seçici (Element ~ Element), Html etiketinin belirtiğimiz sibling etiketini seçer.
- Bitişik Sibling (Kardeş) Seçici (Element + Element), Html etiketinin belirtiğimiz bitişik sibling etiketini seçer.
- Çoklu (Multiple) Seçici (Element, Element), Bir veya daha fazla Html etiketlerini seçebiliriz.
- Attribute ( Özellik)Seçici (Element[özellik-adı]), Html Etiketini özellik değeri ile seçmemize olanak veriyor.
- CSS Sözde Sınıf (Pseudo Class) Seçiciler, sınıf olmayıp sınıf gibi davranan ve seçim yapmamızı sağlayan yapılardır.
- CSS Sözde Element(Pseudo Element) Seçiciler, Element olmayıp element gibi davranan ve seçim yapmamızı sağlayan yapılardır.
Başka bir yazımızda görüşmek dileğiyle…
