CSS Çekirdek Seçiciler

Türev seçiciler

Bir elementin konumundaki bağlam ilişkilerine dayanarak stil belirlemek, etiketleri daha basit hale getirebilir.

CSS1'de, bu şekilde kuralları uygulayan seçiciler bağlam seçicileri (contextual selectors) olarak adlandırılır, çünkü bu seçiciler belirli bir kuralları uygulamak veya engellemek için bağlam ilişkilerine bağımlıdırler. CSS2'de bu seçiciler türev seçiciler olarak adlandırılır, ancak ne adlandırılırlarsa, onların görevleri aynıdır.

Türev seçiciler, belgenin bağlam ilişkilerine dayanarak belirli bir etiketin stilini belirlemenize olanak tanır. Türev seçicileri uygun şekilde kullanarak HTML kodunuzu daha düzenli hale getirebiliriz.

Örneğin, listedeki strong elementlerinin genellikle kalın yazı yerine yatay yazı olmasını istiyorsanız, bu şekilde bir türev seçici tanımlayabilirsiniz:

li strong 
    font-style: italic;
    font-weight: normal;

Lütfen <strong>işaretlenmiş mavi kodun bağlam ilişkisini dikkatle inceleyin:

<p><strong>Ben kalın yazı değilim, yatay yazıyım, çünkü ben listede değilim, bu yüzden bu kural bana etki etmez</strong></p>
<ol>
<li><strong>Ben yatay yazı. Bu, strong elementinin li elementi içinde olduğu için budur.</strong></li>
<li>Ben normal yazı.</li>
</ol>

Örnekteki durumda, sadece li elementindeki strong elementinin stili yatay yazıdır, strong elementine özel bir class veya id tanımlamak gerekmez, kod daha basittir.

Aşağıdaki CSS kurallarına bir göz atalım:

strong {
     color: red;
     
h2 {
     color: red;
     
h2 strong 
     color: blue;

Aşağıda etkilediği HTML'yi görelim:

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
Bu alt başlıkta şiddetle vurgulanan kelimemavi

İlgili İçerikler

Türev Seçiciler hakkında daha derinlemesine bilgi edinmek istiyorsanız, CodeW3C.com'un ileri düzey eğitim bölümlerindeki aşağıdaki içerikleri okuyun: