HTML Karmaşık Seçici Örnekleri

HTML'de karmaşık seçici örnekleri, birden çok özellik ve ilişkiyi bir araya getirerek daha spesifik ve hedefli seçimler yapmanıza olanak tanır. Aşağıda bazı karmaşık seçici örnekleri bulunmaktadır:

1. Child (Çocuk) ve Class Seçici Kombinasyonu:

   • Bir <div> etiketinin içindeki .highlight sınıfına sahip <p> paragraflarını seçer.

   div .highlight { font-weight: bold; color: blue; } 

   Canlı Dene Kopyala

   HTML:

   <div> <p>Normal paragraf</p> <p class="highlight">Bu paragraf vurgulanmıştır.</p> </div> 

   Canlı Dene Kopyala

2. Descendant (Soyut) ve ID Seçici Kombinasyonu:

   • Bir <section> etiketinin içindeki ID'si importantSection olan <p> paragraflarını seçer.

   section #importantSection p { font-size: 18px; color: red; } 

   Canlı Dene Kopyala

   HTML:

   <section id="importantSection"> <p>Önemli paragraf 1</p> <p>Önemli paragraf 2</p> </section> 

   Canlı Dene Kopyala

3. Attribute (Özellik) ve Class Seçici Kombinasyonu:

   • Bir <input> etiketinin içindeki type özelliği "text" olan ve .styled sınıfına sahip öğeleri seçer.

   input[type="text"].styled { border: 2px solid green; } 

   Canlı Dene Kopyala

   HTML:

   <input type="text" class="styled" placeholder="Stilize edilmiş metin kutusu"> 

   Canlı Dene Kopyala

Bu karmaşık seçici örnekleri, HTML belgesinde belirli öğeleri hedeflemek ve bunlara stil uygulamak için kullanılabilir. Farklı seçici türlerini ve kombinasyonlarını kullanarak, özellikle büyük ve karmaşık web sayfalarında istediğiniz öğeleri seçebilir ve düzenleyebilirsiniz.