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;
   }
   

   HTML:

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

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;
   }
   

   HTML:

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

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;
   }
   

   HTML:

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

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.