CSS Seçiciler (Selectors)

CSS Seçiciler (Selectors)

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

CSS seçicileri beş kategoriye ayırabiliriz:

• Basit seçiciler (Simple selectors) (İsme, kimliğe, sınıfa göre öğeleri seçer.)
• Birleştirici seçiciler (Combinator selectors) (Aralarındaki belirli bir ilişkiye göre öğeleri seçer.)
• Sözde sınıf seçiciler (Pseudo-class selectors) (Belirli bir duruma göre öğeleri seçer.)
• Sözde öğe seçicileri (Pseudo-elements selectors) (Bir öğenin bir bölümünü seçme ve stilini belirlemek için kullanılır.)
• Öznitelik seçiciler (Attribute selectors) (Bir özniteliğe veya öznitelik değerine göre öğeleri seçer.)

Basit Seçiciler (Simple Selectors)

Öğe Seçici

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

Aşağıdaki örneğimizde, sayfadaki tüm <p> öğeleri, kırmızı bir metin rengiyle ortaya hizalanacaktır.

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

ID (Kimlik) Seçici

Id 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 kimlik seçici, benzersiz bir öğeyi seçmek için kullanılır.

Belirli bir kimliğe sahip bir öğeyi seçmek için, (#) karakteri ve ardından öğenin kimliğini yazılır.

Aşağıdaki örneğimizde, CSS kuralı, id="onurkul" olan HTML öğesine uygulanacaktır.

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

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

Class (Sınıf) Seçici

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

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

Aşağıdaki örneğimizde, class="center" olan tüm HTML öğeleri kırmızı olacak ve ortaya hizalanmış olacaktır.

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

Bir sınıftan yalnızca belirli HTML öğelerinin etkilenmesini istiyorsanız aşağıdaki örneğimizdeki kullanımı inceleyebilirsiniz.

Bu örnekte yalnızca <p> class="center" olan öğeler kırmızı olacak ve ortaya hizalanmış olacaktır.

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

HTML öğeleri, birden fazla sınıfla da kullanılabilir.

Bu örnekte <p> elemanı, class="center" ve class="large" a göre stilize edilecektir.

<p class="center large">Birden fazla sınıf kullanımına örnek.</p>

Not: Bir sınıf adı sayı başlayamaz!

Genel Seçici

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

Aşağıdaki CSS kuralı, sayfadaki her HTML öğesini etkileyecektir.

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

Gruplama Seçici

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

Aşağıdaki örneği incelediğinizde h1, h2 ve p öğelerinin aynı stil tanımlara sahip olduğunu göreceksiniz.

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ırız.

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

Tüm Basit Seçiciler