Css Ders 3 | Seçiciler

CSS seçiciler, stil vermek istediğiniz HTML öğelerini “bulmak” (veya seçmek) için kullanılır.

CSS seçicilerini beş kategoriye ayırabiliriz:
Kavramlar başta karışık görünebilir, anlamadığınız yerde durmayın örnekler ile pekişecektir.

• Basit seçiciler : İsme, kimliğe, sınıfa göre öğeleri seçin
• Combinator seçiciler : Aralarındaki belirli bir ilişkiye göre öğeleri seçin
• Sınıf seçiciler : Belirli bir duruma göre öğeleri seçin
• Öğe seçicileri : Bir öğenin bir bölümünü seçme ve stilini ayarlama
• Öznitelik seçiciler : Bir özniteliğe veya öznitelik değerine göre öğeleri seçin

CSS öğesi Seçici

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

p {
  text-align: center;
  color: red;
}

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

CSS id Seçici

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

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

Belirli bir id’e sahip bir öğeyi seçmek için, bir kare (#) karakteri ve ardından öğenin id’sini yazın.

#para1 {
  text-align: center;
  color: red;
}

Burada, id=”para1″ olan HTML öğesine uygulanacaktır: 

Not: Bir id adı bir sayı ile başlayamaz!

CSS class Seçici

Class seçici, belirli bir class niteliğine sahip HTML öğelerini seçer.

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

Örnek:

.center {
  text-align: center;
  color: red;
}

Bu örnekte, class=”center” olan tüm HTML öğeleri kırmızı olacak ve ortaya hizalanmış olacaktır: 

Bir class’tan yalnızca belirli HTML öğelerinin etkilenmesini de belirtebilirsiniz.

Örnek:

p.center {
  text-align: center;
  color: red;
}

Bu örnekte yalnızca <p> elamanın class=”center” olan öğeleri ortaya hizalanacaktır.

HTML öğeleri, birden fazla class’a da başvurabilir.

Örnek:

<p class="center large">Bu paragraf iki class'tan oluşmaktadır.</p>

Bu örnekte <p> elemanı class=”center” ve class=”large” a göre şekillendirilecektir.

Not: Bir class adı bir sayı ile başlayamaz!

CSS Evrensel Seçici

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

Örnek:

* {
  text-align: center;
  color: blue;
}

CSS Gruplama Seçici

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

Aşağıdaki CSS koduna bakın (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 en aza indirmek için seçicileri gruplamak daha iyi olacaktır.

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

Örnek:

h1, h2, p {
  text-align: center;
  color: red;
}