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

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

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

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

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

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

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

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

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