CSS Basit ve Karmaşık Seçici Örnekleri

CSS'de basit ve karmaşık seçici örneklerini aşağıda bulabilirsiniz:

1. Eleman Seçicisi:

   p { color: blue; } 

   Canlı Dene Kopyala

   Bu örnek, sayfadaki tüm <p> (paragraf) elemanlarını seçer ve metin rengini mavi olarak ayarlar.

2. ID Seçici:

   #header { background-color: gray; } 

   Canlı Dene Kopyala

   Bu örnek, sayfadaki bir elemanın ID'si "header" olanı seçer ve arka plan rengini gri olarak ayarlar.

3. Sınıf Seçici:

   .highlight { font-weight: bold; } 

   Canlı Dene Kopyala

   Bu örnek, sayfadaki tüm elemanlardan sınıfı "highlight" olanları seçer ve yazıyı kalın yapar.

4. Elemanın Alt Elemanı Seçici:

   nav ul { list-style-type: none; } 

   Canlı Dene Kopyala

   Bu örnek, <nav> elemanının altındaki <ul> elemanlarını seçer ve liste stilini devre dışı bırakır.

5. Çocuk Seçici:

   article > p { margin-bottom: 10px; } 

   Canlı Dene Kopyala

   Bu örnek, <article> elemanının doğrudan altındaki <p> elemanlarını seçer ve alt marjını ayarlar.

6. Pseudo-Sınıf Seçici:

   a:hover { color: red; } 

   Canlı Dene Kopyala

   Bu örnek, bir bağlantıya fare üzerine gelindiğinde rengini kırmızı olarak değiştirir.

7. Önceki Kardeş Seçici:

   h2 + p { font-style: italic; } 

   Canlı Dene Kopyala

   Bu örnek, bir <h2> elemanının hemen sonraki <p> elemanını seçer ve yazıyı italik yapar.

8. Genel Kardeş Seçici:

   h3 ~ p { color: green; } 

   Canlı Dene Kopyala

   Bu örnek, bir <h3> elemanının ardından gelen tüm <p> elemanlarını seçer ve metin rengini yeşil yapar.