CSS Seçicileri

Css seçicileri kullanıldıkları yerde kendilerini göstererek taşıdıkları özellikleri bulundukları yere uygularlar.

Öğe (ID) Seçici:

Uygulandıkları HTML nesnelerine etki ederler. Aşağıdaki örnekte <p> nesnesine uygulanarak onun özelliklerini değiştirmiştir. Örnekte paragraf sayfaya ortalanmış ve rengi kırmızı olarak ayarlanmıştır. <p> etiketine uygulandığı için sayfada kullanılan tüm <p> etiketlerine etki edecektir.

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-align: center;
  color: red;
} 
</style>
</head>
<body>

<p>Her paragraf stilden etkilenecektir.</p>
<p id="paragraf1">Ben de</p>
<p>Ve Ben!</p>

</body>
</html>

Kimlik Seçici:

Bu seçici ceşidinde css özelliklerini bir html etiketine değil de özel bir kimlik olarak tanımladık. O nedenle sayfadaki her yerde değil sadece kendisini kimlik olarak çağırılan yerde özelliklerini göstermektedir.

Aşağıdaki örnekte <p> etiketini tek başına yazdığımızda sadece <p> etiketinin özelliklerini ekrana yansıtmaktadır. Ancak <p> etiketine bir kimlik ile css eklediğimizde artık o kimlik özellikleri <p> etiketine etki ederek özelliklerini değiştirmektedir.

<!DOCTYPE html>
<html>
<head>
<style>
#paragraf1 {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<p id="paragraf1">Merhaba CSS!</p>
<p>Bu paragraf stil özelliklerinden etkilenmeyecektir.</p>

</body>
</html>

Sınıf Seçici (Tüm ögeler için):

Bu tür seçiciler sınıf olarak tanımlanmaktadır. Birden fazla yerde kullanılmaktadırlar. Kullanıldıkları her yerde özelliklerini yansıtırlar. Birden fazla HTML etiketinde kullanılabilirler.

Aşağıdaki örnekte sınıf seçici hem bir <p> etiketine hemde <hx> başlık etiketine uygulanmış ve kendi özelliklerini yansıtmıştır.

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">Kırmızı renkli ve sayfaya ortalı Başlık</h1>
<p class="center">Kırmızı renkli ve sayfaya ortalı Paragraf</p> 

</body>
</html>

Sınıf Seçici (Yalnızca <p> ögeler için):

Bu sınıf seçici yalnızca bir HTML etiketi için tanımlanmaktadır. Tanımlandığı HTML etiketi dışındaki etiketlere etki etmemektedir. Aşağıdaki örnekte <h1> etiketine css uygulanmamıştır. Sınıf olarak tanımlandığı halde <p> etiketine tanımlandığı için taşıdığı özellikler sadece <p> etiketine etki etmiştir.

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">Bu başlık etkilenmedi</h1>
<p class="center">Bu paragraf kırmızı ve sayfaya ortalandı.</p> 

</body>
</html>

Aynı Anda İki Sınıfı Kullanan HTML Nesnesi:

Bazı durumlarda bir HTML etiketi için birden fazla sınıf tanımlanabilir ve bu sınıfları aynı anda kullanmaları istenebilir. Aşağıdaki örnekte <p> etiketi hem center hemde large isminde sınıflar tanımlanmıştır. Bu sınıflar yalnızca biri ve ikisi aynı anda kullanılmıştır. Nasıl sonuç oluştuğu ekran görüntüsünde anlaşılmaktadır.

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
  text-align: center;
  color: red;
}

p.large {
  font-size: 300%;
}
</style>
</head>
<body>

<h1 class="center">Bu başlık etkilenmedi</h1>
<p class="center">Bu paragraf kırmızı ve sayfaya ortalı</p>
<p class="center large">Bu paragraf kırmızı, ortalı ve büyük font oldu.</p> 

</body>
</html>

Evrensel Seçici:

Bu seçici çeşidi * simgesi ile tanımlanmaktadır. Evrensel olduğu için bir sayfada bir kere tanımlandığında o sayfada bulunan bütün HTML etiketlerine etki eder ve kendi özelliklerini sayfaya yansıtır. Aşağıdaki örnekte tüm yazılar sayfaya ortalı ve rengi mavi hale getirilmiştir. Bunun için evrensel seçici olan * kullanılmıştır.

<!DOCTYPE html>
<html>
<head>
<style>
* {
  text-align: center;
  color: blue;
}
</style>
</head>
<body>

<h1>Merhaba!</h1>

<p>Herşey stilden etkilenir.</p>
<p id="paragraf1">Ben de!</p>
<p>Bu satır da!</p>

</body>
</html>

Gruplandırma Seçicileri:

Bu tür seçici tanımlama da aynı anda birden fazla HTML etiketi için sınıf tanımlanabilir. Tek seferde tanımlanan özellik daha sonra istenilen yerde teker teker kullanılabilir. Böylece yerden ve zamandan tasarruf edilebilir. Aşağıdaki örnekte <h1>, <h2> ve <p> etiketlerine aynı şekilde gruplama yaparak sınıf tanımlanmıştır.

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1>Merhaba!</h1>
<h2>Küçük Başlık!</h2>
<p>Bu da paragraf.</p>

</body>
</html>