CSS Seçicileri

CSS Seçicileri

CSS seçicileri, stil ayarlamak istediğimiz HTML elemanlarını 'bulmak' veya 'seçmek' için kullanılır.

CSS seçicilerini beş kategoriye ayırabiliriz:

Bu sayfa temel CSS seçicilerini açıklayacaktır.

CSS Element Seçicisi

Element seçicisi, HTML elementinin adına göre element seçer.

Örnek

Burada, sayfadaki tüm <p> elementleri merkeze hizalanacak ve kırmızı metin rengine sahip olacaktır:

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

Kişisel olarak deneyin

CSS id seçicisi

ID seçicisi, HTML elementinin id özelliğini kullanarak belirli bir element seçer.

Element id'si sayfada benzersiz olduğundan, id seçicisi, benzersiz bir element seçmek için kullanılır!

Belirli bir id'ye sahip elementi seçmek için bir çizgi işareti (＃), ardından elementin id'si yazın.

Örnek

Bu CSS kuralı, id="para1" olan HTML elementine uygulanır:

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

Kişisel olarak deneyin

Dikkat:ID adları rakamla başlayamaz.

CSS sınıf seçicisi

Sınıf seçicisi, belirli bir sınıfa sahip HTML elementlerini seçer。

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

Örnek

Bu örnekte, tüm class="center" olan HTML elementleri kırmızı ve merkeze hizalanacaktır:

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

Kişisel olarak deneyin

Ayrıca, sadece belirli HTML elementlerinin sınıfa etkileneceğini belirtebilirsiniz。

Örnek

Bu örnekte, sadece class="center" olan <p> elementi merkeze hizalanacaktır:

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

Kişisel olarak deneyin

HTML elementleri de birden fazla sınıf alabilir.

Örnek

Bu örnekte, <p> elementi class="center" ve class="large" olarak stil ayarlanır:

<p class="center large">Bu paragraf iki sınıfı alır.</p>

Kişisel olarak deneyin

Dikkat:Sınıf adları rakamla başlayamaz!

CSS genel seçicisi

Genel seçici (*), sayfadaki tüm HTML elementlerini seçer。

Örnek

Aşağıdaki CSS kuralı, sayfadaki tüm HTML elementlerini etkiler:

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

Kişisel olarak deneyin

CSS grup seçicisi

Grup seçicileri, aynı stil tanımlarına sahip tüm HTML elementlerini seçer。

Aşağıdaki CSS koduna bir göz atın (h1, h2 ve p elementleri aynı stil tanımlarına sahiptir):

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

Kodun boyutunu en aza indirmek için seçicileri gruplandırmak en iyisidir。

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

Örnek

Bu örnekte, yukarıdaki koddaki seçicileri gruplandırıyoruz:

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

Kişisel olarak deneyin

Tüm basit CSS seçicileri

Seçici Örnek Örnek açıklaması
.class .intro class="intro" olan tüm öğeleri seçin。
#id #firstname id="firstname" olan elementi seçin。
* * Tüm elementleri seçin。
element p Tüm <p> elementlerini seçin。
element,element,.. div, p Tüm <div> elementlerini ve tüm <p> elementlerini seçin。

Genişletilmiş Okuma

Dış Kitap:CSS Element Seçicisi

Dış Kitap:CSS Seçici Gruplama

Dış Kitap:CSS Sınıf Seçicisi Açıklaması

Dış Kitap:CSS ID Seçicisi Açıklaması

Dış Kitap:CSS Özellik Seçicisi Açıklaması

Dış Kitap:CSS Çocuk Seçicisi

Dış Kitap:CSS Çocuk Element Seçicisi

Dış Kitap:CSS Komşu Kardeş Seçicisi