Alt Eleman Seçicileri

Burada anlatılacak seçicilerle elemanların alt elemanları seçilebilir. Alt elemandan kasıt bir elemanın başka bir elemanın içerisinde bulunmasıdır. Örneğin aşağıdaki kodda <p> elemanı <div> elemanının alt elemanıdır.

...
<div>
    <p> Örnek Paragraf </p>
</div>
...

:first-child

Bu seçiciyle bir elemanın ilk alt elemanı olan elemanlar seçilir.


:last-child

Bu seçiciyle bir elemanın son alt elemanı olan elemanlar seçilir.


:nth-child(#)

Bu seçiciyle bir elemanın # yerine yazılan sıradaki alt elemanı olan elemanlar seçilir. Örneğin p:nth-child(3) şeklinde bir seçici oluşturduğunda başka bir elemanın üçüncü alt elemanı olan paragraflar seçilir.


:nth-last-child(#)

Bu seçiciyle bir elemanın # yerine yazılan sıradaki alt elemanı olan elemanlar seçilir. Fakat sıra sayılırken sondan başlanır. Örneğin p:nth-last-child(3) şeklinde bir seçici oluşturduğunda bir elemanın sondan üçüncü alt elemanı olan paragraflar seçilir.

<!DOCTYPE html>
<html>
<head>
<title>CSS Alt Eleman Seçicileri</title>
<style>
p:first-child{
    color:red;
}
p:last-child{
    color:blue;
}
p:nth-child(2){
    color:green;
}
p:nth-last-child(2){
    color:yellow;
}
</style>
</head>
<body>
<div>
    <h1>Örnek Başlık 1</h1>
    <p>Örnek Paragraf 1</p>
    <p>Örnek Paragraf 2</p>
    <p>Örnek Paragraf 3</p>
    <p>Örnek Paragraf 4</p>
</div>
<div>Buradan itibaren yeni div elemanı başlamaktadır.</div>
<div>
    <p>Örnek Paragraf 5</p>
    <h1>Örnek Başlık 2</h1>
    <p>Örnek Paragraf 6</p>
    <h1>Örnek Başlık 3</h1>
    <p>Örnek Paragraf 7</p>
</div>
</body>
</html>

Yukarıdaki örnekte ilk alt eleman olan paragraflar kırmızı (Sadece Örnek Paragraf 5), son alt eleman olan paragraflar mavi (Örnek Paragraf 4 ve Örnek Paragraf 7), baştan ikinci alt eleman olan paragraflar yeşil (Sadece Örnek Paragraf 1) ve sondan ikinci alt eleman olan paragraflar sarı (Sadece Örnek Paragraf 3) olacak şekilde biçimlendirilmiştir.


:first-of-type

Bu seçiciyle bir elemanın alt elemanı olan belli bir türdeki ilk eleman seçilir.


:last-of-type

Bu seçiciyle bir  elemanın alt elemanı olan belli bir türdeki son eleman seçilir.


:nth-of-type(#)

Bu seçiciyle bir elemanın alt elemanı olan belli bir türdeki # yerine yazılan sıradaki eleman seçilir.


:nth-last-of-type(#)

Bu seçiciyle bir elemanın alt elemanı olan belli bir türdeki # yerine yazılan sıradaki eleman seçilir. Fakat sıraya bakılırken saymaya sondan başlanır.

<!DOCTYPE html>
<html>
<head>
<title>CSS Alt Eleman Seçicileri</title>
<style>
p:first-of-type{
    color:red;
}
p:last-of-type{
    color:blue;
}
p:nth-of-type(2){
    color:green;
}
p:nth-last-of-type(2){
    color:yellow;
}
</style>
</head>
<body>
<div>
    <h1>Örnek Başlık 1</h1>
    <p>Örnek Paragraf 1</p>
    <p>Örnek Paragraf 2</p>
    <p>Örnek Paragraf 3</p>
    <p>Örnek Paragraf 4</p>
</div>
<div>Buradan itibaren yeni div elemanı başlamaktadır.</div>
<div>
    <p>Örnek Paragraf 5</p>
    <h1>Örnek Başlık 2</h1>
    <p>Örnek Paragraf 6</p>
    <h1>Örnek Başlık 3</h1>
    <p>Örnek Paragraf 7</p>
    <p>Örnek Paragraf 8</p>
</div>
</body>
</html>

Yukarıdaki örnekte alt eleman olan ilk  paragraflar kırmızı (Örnek Paragraf 1 ve Örnek Paragraf 5), alt eleman olan son  paragraflar mavi (Örnek Paragraf 4 ve Örnek Paragraf 8), alt eleman olan baştan ikinci paragraflar yeşil (Örnek Paragraf 2 ve Örnek Paragraf 6) ve alt eleman olan sondan ikinci paragraflar sarı (Örnek Paragraf 3 ve Örnek Paragraf 7) olacak şekilde biçimlendirilmiştir.


:only-child

Bu seçiciyle bir elemanın tek alt elemanı olan elemanlar seçilir.


:first-of-type

Bu seçiciyle bir elemanın belli bir türdeki tek alt elemanı olan elemanlar seçilir.

<!DOCTYPE html>
<html>
<head>
<title>CSS Alt Eleman Seçicileri</title>
<style>
p:only-child{
    background-color:gray;
}
p:only-of-type{
    color:blue;
}
</style>
</head>
<body>
<div>   
    <p>Örnek Paragraf 1</p>
</div>
<div>
    <h1>Örnek Başlık 1</h1>
    <p>Örnek Paragraf 2</p>
</div>
<div>
    <h1>Örnek Başlık 2</h1>
    <p>Örnek Paragraf 3</p>
    <p>Örnek Paragraf 4</p>
</div>
</body>
</html>

Yukarıdaki örnekte tek alt eleman olan paragrafların arkaplan rengi gri, alt eleman olan tek paragraf olan paragrafların yazı rengi mavi olarak biçimlendirilmiştir. İlk paragraf içerisinde bulunduğu <div> elemanının tek elemanıdır, aynı zamanda burada alt eleman olan tek paragraftır. Bu nedenle arkaplanı gri yazı rengi mavi olacaktır. "Örnek Paragraf 2" içinde bulunduğu <div> elemanının alt elemanı olan tek paragraftır fakat bu elemanın tek alt elemanı değildir, çünkü "Örnek Başlık 1" de aynı <div> elemanı içerisindedir. Bu durumda bu paragrafın sadece yazı rengi mavi olacak, arkaplan rengi gri olmayacaktır. "Örnek Paragraf 3" ve "Örnek Paragraf 4" ise ne içerisinde bulundukları <div> elemanının tek alt elemanı ne de alt elemanı olan tek paragrafıdır. Bu nedenle bu iki paragraf biçimlendirmeden etkilenmeyecektir.