CSS "ELEMENT" SELECTORS

   Bu öğe seçici, öğe adına göre HTML öğelerini seçer.

 ÖRNEK: Burada, sayfadaki tüm <p> öğeleri kırmızı metin rengiyle ortaya hizalanacaktır: 

p {

  text-align: center;

  color: red;

} 

CSS "İD" SELECTORS

    İD seçici, belirli bir öğeyi seçmek için bir HTML öğesinin id niteliğini kullanır.

    Bir öğenin kimliği, bir sayfa içinde benzersizdir, bu nedenle id seçici, benzersiz bir öğeyi seçmek için                       kullanılır! 

    Belirli bir kimliği olan bir öğeyi seçmek için, bir kare {#}karakteri ve ardından öğenin kimliğini yazılır.

ÖRNEK: AşağıdA CSS kuralı, id="elma" ile HTML öğesine uygulanacaktır:

#elma {

  text-align: center;

  color: red;

} 

CSS "CLASS" SELECTORS

     Sınıf seçici, belirli bir sınıf özelliğine sahip HTML öğelerini seçer.

    Belirli bir sınıfa sahip öğeleri seçmek için, bir nokta (.) karakteri ve ardından sınıf adını yazın.

ÖRNEK: Bu örnekte, class="center" değerine sahip tüm HTML öğeleri kırmızı olacak ve ortaya hizalanacaktır:

.center {

  text-align: center;

  color: red;

} 

• Aynı zamanda bir sınıftan yalnızca belirli HTML öğelerinin etkilenmesi gerektiğini de belirtebilirsiniz.

ÖRNEK: Bu örnekte yalnızca class="center" olan <p> öğeleri kırmızı olacak ve ortaya hizalanacak:

p.center {

  text-align: center;

  color: red;

} 

•   HTML öğeleri ayrıca birden fazla sınıfa başvurabilir.

ÖRNEK: Bu örnekte, <p> öğesinin stili class="center" ve class="large"'a göre olacaktır:

<p class="center large">This paragraph refers to two classes.</p> 

CSS "UNİVERSAL" SELECTORS

   Evrensel seçici (*), sayfadaki tüm HTML öğelerini seçer.

ÖRNEK: Aşağıdaki CSS kuralı, sayfadaki her HTML öğesini etkileyecektir:

* {

  text-align: center;

  color: blue;

} 

CSS "GROUPİNG" SELECTORS

     Gruplandırma seçici, aynı stil tanımlarına sahip tüm HTML öğelerini seçer.

ÖRNEK: Aşağıdaki CSS kodunda (h1, h2 ve p öğeleri aynı stil tanımlarına sahiptir):

h1 {

  text-align: center;

  color: red;

}

h2 {

  text-align: center;

  color: red;

}

p {

  text-align: center;

  color: red;

} 

•    Kodu küçültmek için seçicileri gruplamak daha iyi olacaktır.

   Seçicileri gruplandırmak için her seçiciyi virgülle ayırın.

ÖRNEK: Bu örnekte, seçicileri yukarıdaki koddan gruplandırdık. Seçicileri virgülle ayırarak bu kadar basite indirgeye biliyoruz.

h1, h2, p {

  text-align: center;

  color: red;

} 

SİMPLE SELECTORS

   SELECTORS                       ÖRNEK                       ÖRNEK AÇIKLAMA

     #İD                                                 #FİRSTNAME                     id="firstname" ile öğeyi seçer

     .class                                             .intro                                  class="intro" ile tüm öğeleri seçer

     element.class                             p.intro                                Yalnızca class="intro" içeren <p> öğelerini seçer

     *                                                     *                                           Bütüğün öğeleri seçer

     element                                       p                                           Bütün <p> öğesini seçer

     element,element                      div,p                                    Tüm <div> öğelerini ve tüm <p> öğelerini seçer