Söz konusu olan alt elemanlara çocuk elemanları denir. Bunlar, doğrudan diğer elemanlara bağlı olanlardır. Bu açıkçası biraz soyut duyulabilir, ancak bir örnekle güzel bir şekilde açıklanabilir.
<body> <p>Paragraf 1</p> <p>Paragraf 2</p> <p>Paragraf 3</p> </body>
Burada body, bir üst elemandır. p elemanları, body'nin alt elemanlarıdır. Bu bilgiye dayanarak, çocuk eleman seçicisini uygulamak mümkündür.
body>p {
color: mavi;
}
Bu sözdizimi, body'nin doğrudan alt elemanları olan tüm paragrafları mavi renk yapar.
Aşağıdaki örnek, body p ve body>p komutları arasındaki farkları tekrar gösterir.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
body p {
color:#0066FF;
}
</style>
</head>
<body>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
<div>
<p>Paragraf 4</p>
</div>
</body>
</html>İlk üç tanımlanan p metin paragrafı, body'nin doğrudan çocuklarıdır. body p komutu, tüm metin paragraflarına mavi renk verir. body>p ise sadece ilk üç metin paragrafını etkiler. Bu nedenle bu paragraflar daha büyük bir yazı tipinde görüntülenir.
Sıradaki olarak, Takip Eden Eleman Seçicisini size tanıtmak isterim. Bu seçici, diğer elemana hemen ardından gelen ve aynı üst elemana sahip olan bir elementi vurgular. İşte buna da bir örnek:
h1+p {
color: mavi;
}
Bu sözdizimiyle bir paragrafın metin rengi mavi yapılır. Ancak bu, paragrafın doğrudan birinci sıradaki başlık ile ilişkili olduğunda geçerlidir.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1+p {
color: mavi;
}
</style>
</head>
<body>
<h1>Başlık</h1>
<p>Paragraf 1</p>
<h2>Başlık</h2>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
<div>
<p>Paragraf 4</p>
</div>
</body>
</html>Tarayıcıda sonucu inceleyin.
Sadece ilk paragraf burada mavi yazı tipinde gösterilir. Diğer paragraflar siyahtır. Bunun nedeni, bu p elemanlarının h1 yerine h2'yi takip etmesidir.
CSS3'te, Takip Eden Elemanlar ile ilgili olarak başka seçenekler de sunulmuştur. Artık belirli bir elemanın tüm takip eden elemanlarına erişmek mümkündür. Bir örnek:
h1~p {
color: kırmızı;
}
Bu sözdizimiyle h1'i takip eden tüm paragraflar ele alınır.
Sadece elemanlara doğrudan erişmek mümkün değildir. Elemanların özelliklerine erişmek de mümkündür.
İşte bu Seçicilerden bazıları:
• [att] – Eleman sadece öznitelik içermelidir. Değer geçirilip geçirilmemesi önemli değildir.
• a[href] – Tüm bağlantılar (<a href=…>) işaretlenir. Ancak anka tanımlarına (<a name=…>) bu durum geçerli değildir.
• [align=sol] – Align özniteliği sol değeri olan tüm elemanlar işaretlenir.
• [attr~=değer] – Boşluklarla ayrılmış bir değer listesinde değer içeren tüm elemanlar işaretlenir.
• [attr|=değer] – Belirtilen değerin bir çizgi ile ayrılmış bir karakter dizisinin başında olması durumunda bir eleman işaretlenir.
• img[genişlik="200"] – 200 piksel genişliğinde tüm grafikler işaretlenir.
Bu öznitelik seçicilerinin aslında ne zaman ihtiyaç duyulabileceği konusu tabii ki önemli. Örneğin bir form ve içinde tanımlanan onay kutularını düşünün. Onay kutuları - artık biliyorsunuz - girişler için input elemanıyla tanımlanır. Sorun şudur: input elemanı, normal metin giriş alanlarının tanımlanmasında da kullanılır. Bu nedenle input üzerinden onay kutularına ve metin giriş alanlarına farklı biçimlendirme yapamazsınız. İşte burada, öznitelik seçicileri devreye girer. Bu seçicilerin daha iyi anlaşılması için aşağıdaki örneğe bir göz atın:
<body> İsim: <input type="text" id="isim" /> <br /> Erkek: <input type="checkbox" name="cinsiyet" id="cinsiyet" /> <br /> Kadın: <input type="checkbox" name="cinsiyet" id="cinsiyet" /> </body>
Farklı form elemanları tanımlandı.
• bir metin giriş alanı
• iki onay kutusu
Bu alanlar biçimlendirilecek.
input {
border:3px solid #000;
width: 10em;
}Alanlara bir çerçeve ve bir genişlik atanır.
Buradaki sorun şu: Belirtilen genişlik aslında yalnızca metin giriş alanına uygulanmalı, ancak onay kutularına uygulanmamalıdır. Ancak, öğe seçicisi ile farklı alan türleri arasında ayrım yapılamaz. Böyle bir ayrımın çalışabilmesi için özellik seçimcilerine yönelinir. Böyle bir şeyin nasıl görünebileceğine dair bir örnek aşağıda verilmiştir:
input[type="checkbox"] {
width: auto;
}
Gösterilen seçici ile gerçekten yalnızca type="checkbox" öznitelik-değer kombinasyonuna sahip olan giriş öğelerine erişilir.
Tekrarlar
CSS şimdi artık tekrarları hedefleme olanağı sağlar. Elbette burada önemli olan soru şudur: Böyle bir şeyin ne işe yarayabileceği. Bu tür seçiciler örneğin, bir tablonun her ikinci satırını farklı renklendirmek istenirse faydalıdır. Kullanılabilir seçicileri tanıtmadan önce, oldukça tipik bir örnek:
<ol id="sprachen">
<li>HTML</li>
<li>HTML5</li>
<li>CSS</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JScript</li>
<li>Java</li>
<li>PHP</li>
<li>Python</li>
</ol>
Burada normal bir liste oluşturulmuştur. CSS ile şimdi her üçüncü liste girdisine bir arka plan rengi atanması gerekmektedir.
Bunun için nth-child() seçici kullanılır. Bu seçici ile her n-ci çocuk eleman hedeflenir.
#sprachen li:nth-child(3n) {
background-color: red;
}
Mevcut seçiciler şunlardır:
• :root – Bu seçici kullanılarak bir belgenin köküne ulaşılabilir.
• :nth-child(n) – Bir ebeveyn içinde her n-ci elemanı yönetir. Bu seçici özellikle farklı şekilde biçimlendirilmesi gereken birden fazla öğe olduğunda yardımcı olur. n sabit bir anahtar kelimeye karşılık gelir ve aritmetik işlemler uygulanabilen bir değerdir. n, 1 değeri ile eşleştirilebilir.
• :nth-last-child(n) – Bir öğenin içindeki her n'inci elemanı kontrol eder, arka taraftan elemanları geçer.
• :nth-of-type(n)– Aynı HTML türündeki her n'inci elemanı aynı düzeyde kontrol eder.
• :nth-last-of-type(n) – Aynı düzeydeki her n'inci elemanı kontrol eder, arka taraftan elemanları geçer.
• :first-child – Bir öğenin içindeki ilk çocuk elemanını kontrol eder.
• :last-child – Bir öğenin içindeki son çocuk elemanını kontrol eder.
• :first-of-type – Bir ebeveyn içindeki aynı HTML öğe türündeki ilk öğeyi kontrol eder.
• :last-of-type – Bir ebeveyn içindeki aynı HTML öğe türündeki son öğeyi kontrol eder.
• :only-child – Bir kardeş öğesi olmayan ve üst öğesinde tek çocuk elemanı olan bir öğeyi kontrol eder.
• :only-of-type – Aynı HTML türünden kardeş öğeleri olmayan ve üst öğesinde bu türün tek çocuk elemanı olan bir öğeyi kontrol eder.
• :empty – Boş öğeleri kontrol eder.
Tanıtılan seçiciler, HTML ile çalışmayı önemli ölçüde kolaylaştırır, çünkü geçmişte zorlu sınıf tanımlamaları artık gereksizdir.
