Eleman Türü Kombinasyonları

Eleman_Türü Eleman_Türü

İki eleman türü yan yana yazıldığında ilk eleman türü içindeki tüm ikinci eleman türleri seçilmiş olur. 

<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
div p{
color:red;
}
</style>
</head>
<body>
    <div><p>Örnek Paragraf 1</p></div>
    <p>Örnek Paragraf 2</p>
</body>
</html>

Yukarıdaki örnekte <div> elemanı içerisinde bulunan <p> elemanları biçimlendirilmiştir. Bu nedenle ilk paragraf biçimlendirilecek ama ikinci paragraf biçimlendirilmeyecektir.


Eleman_Türü > Eleman_Türü

Bu şekilde oluşturulan seçicilerde ilk eleman türü içerisinde bulunan ikinci eleman türündeki elemanlar seçilir. Bu kalıbın bir üstteki kaıptan farkı ikinci elemanın ilk elemanın hemen bir alt kademesinde olması gerekliliğidir.

<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
div>b{
color:red;
}
</style>
</head>
<body>
    <div><p><b>Örnek Paragraf 1</b></p></div>
    <div><b>Örnek Paragraf 2</b></div>
</body>
</html>

Yukarıdaki örnekte ilk paragraf biçimlendirilmeyecektir. Çünkü <b> elemanı doğrudan <div> elemanı içerisinde değildir. İlk önce <p> elemanı <b> elemanını kapsamakta, daha sonra da <div> elemanı <p> elemanını kapsamaktadır. Eğer seçici olarak kullanılan kalıpta > sembolü yerine boşluk kullanılsaydı bu durumda iki paragraf da biçimlendirilecekti.


Eleman_Türü ~ Eleman_Türü

Bu şekilde oluşturulan seçicilerde aynı eleman içinde bulunan elemanlardan birinin diğerinden sonra gelmesi seçimde etkili olur. Aynı eleman içinde bulunan elemanlardan birinci eleman türünden sonra gelen ikinci eleman türündeki elemanlar seçilmiş olur.

<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
h1~p{
color:red;
}
</style>
</head>
<body>
    <p>Örnek Paragraf 1</p>
    <h1>Örnek Başlık</h1>
    <p>Örnek Paragraf 2</p>
    <p>Örnek Paragraf 3</p>
</body>
</html>

Yukarıdaki örnekte başlıktan sonra gelen paragraflar biçimlendirilecektir.


Eleman_Türü + Eleman_Türü

Bu şekilde oluşturulan seçicilerin çalışma şekli de bir önceki ile benzerdir. Fakat burada sadece ikinci eleman birinci elemandan hemen sonra geliyorsa biçimlendirilir.

<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
h1+p{
color:red;
}
</style>
</head>
<body>
    <h1>Örnek Başlık 1</h1>
    <p>Örnek Paragraf 1</p>
    <p>Örnek Paragraf 2</p>
    <h1>Örnek Başlık 2</h1>
    <h2>Örnek Alt Başlık</h2>
    <p>Örnek Paragraf 3</p>
    <p>Örnek Paragraf 4</p>
</body>
</html>

Yukarıdaki örnekte ilk paragraf biçimlendirilecektir. Çünkü h1 elemanından hemen sonra gelmiştir. İkinci paragraf biçimlendirilmeyecektir. Üçüncü paragraf h1'den sonra gelmektedir ama hemen sonra gelmemektedir, arada bir de h2 elemanı vardır bu nedenle o da biçimlendirilmeyecektir.