CSS Seçicileri Gruplama - Grouping Selectors

Aşağıda ki gibi bir kodumuz varsa;

h1 {
    color:green;
}

h2 {
    color:green;
}

p {
    color:green;
}

Yani tüm seçicilerin özellikleri ve değerleri aynı ise bu seçicileri tek bir CSS kodu ile tanımlayabiliriz. Ayrıca bu durumda kod tasarrufuda yapmış olacağız. Seçicileri virgül ile ayırarak gruplamalıyız. Yukarıda ki kodu nasıl küçültüp grupladığımızı görelim.

h1,h2,p {
color:green;
}

CSS Seçicileri İç içe Yerleştirme - Nesting Selectors

Aşağıda ki gibi bir XHTML kodumuz var;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

   <head>

      <meta http-equiv="content-type" content="text/html; charset=utf-8;" />

      <link rel="stylesheet" type="text/css" href="dosya_adi.css" />

      <title>Başlık Buraya</title>

   </head>

   <body>

      <div class="deneme">

         <p>Bu bir paragraf.</p>

      </div>

         <p>Bu da bir paragraf.</p>

   </body>

</html>

... ve tüm p etiketlerine genel bir stil verdik ama "deneme" class'ının altında ki p etiketine ayrı stil vermek istiyoruz. Bunun için " üstte ki seçici boşluk altta ki seçici " ".deneme p {color:white;}" kulanımını uygulayabiliriz. CSS kodumuzu görelim.

.deneme {
    background-color:blue;
}

p {
    color:gray;
}

.deneme p {
    color:white;
}

Kodun tarayıcıda nasıl göründüğüne bakmak için tıklayınız.