CSS Bilgileri -3- CSS Seçiciler

Merhaba,

Bir önceki yazıda CSS Seçicilerden bahsettik. Etiket seçici, ID ve Class seçicileri öğrendik. Fakat daha detaylı bir CSS yapısı oluşturabilmemiz için bunlar yeterli değil. Bazı durumlarda seçicileri daha özele indirgemek gerekebilir. Aşağıdaki tabloda genel kullanımları örnekleyelim:

<ol class="listemiz">
   <li>Un cobaye</li>
   <li>Des cobaux</li> 
</ol>

Yukarıdaki kullanım örneklerindeki gibi seçicileri kullanarak HTML sayfamızda hangi öğeye stil vermek istediğimizi belirledikten sonra artık stil kodlarımızı yazmaya başlayabiliriz.

Belirli Alandaki Öğeler

Sayfamızdaki bölümleri ayırmak için kullandığımız <header> , <footer> , <section> , <div> gibi alanlar içerisindeki öğeleri farklı stil kodlarıyla ayırabiliriz.

header a {
  color: red;
}

Örnek olarak bu kullanımda <header> alanımızdaki tüm <a> etiketlerinin renginin kırmızı olmasını söyledik.

Pseudo-class Seçicileri

HTML etiketleri farklı durumlarda bulunabilir. Bunun en genel örneği bir linkin (<a> etiketinin) mouse imleci ile üzerine gelinmesi ile olur. CSS ile imleç üzerine gelmeden önceki durumu ile imleç üzerine gelindikten sonraki durumu farklı tanımlayabiliriz.

a {
  color: blue;
}

a:hover {
  color: red;
}

Bu örnekte imlecimiz linkin normal durumda mavi renkte yazılmasını söyledik. Fakat a:hover seçicisi ile de imleç üzerine gelindiğindeki durumu, yani kırmızı yazmasını söylemiş olduk.

Görünümü:

Öncelik Sırası

Bir HTML etiketi aynı zamanda class, id ve style özelliklerine sahip olabilir. Ve CSS’de hem etiket, hem class, hem de id için farklı bir stil özelliği tanımlanmış olabilir. Örnek vermek gerekirse:

<p class="mesaj" id="slogan" style="color:red;">
   Kargalar sürü ile kartallar yalnız uçar.
</p>

HTML kodumuzda bir etiket, bir class, bir id ve bir stil bulunmakta. Şimdi CSS kodumuzu yazalım.

p {
   color: yellow;
}

.mesaj {
   color: green;
}

#slogan {
   color:orange;
}

Etiket içerisinde stil özelliği kullandık ve kırmızı renkte olmasını söyledik. CSS kodumuzda da <p> etiketine sarı rengi, mesaj classına yeşil rengi ve slogan idsine turuncu rengi verdik. Tüm bu özellikleri taşıyan yazımız tarayıcıda ne renk yazacaktır? Cevap: KIRMIZI

Çünkü;

1. Öncelik: Etikete style özelliği ile verilmiş CSS özelliğidir. Burada diğerlerine göre farklı bir değer varsa öncelikli olarak bu uygulanır.
2. Öncelik: Etiketin bir id değeri var ise ve CSS’de bu değere karşılık bir stil özelliği varsa ve de style özelliği ile buna muhalefet bir değer verilmemişse bu kullanılır.
3. Öncelik: Etiketin bir class değeri var ise ve CSS’de bu değere karşılık bir stil özelliği varsa ve de buna muhalefet bir style özelliği veya id stili yoksa bu kullanılır.
4. Öncelik: Eğer bir class veya id değeri yok ise veya bir style özelliği kullanılmamışsa, etiket için tanımlanmış stil özelliği kullanılır.

Yani yukarıdaki örneğimizde style özelliğini kaldırırsak paragrafımız id stilinden aldığı turuncu renginde, id değerini de kaldırırsak class stilinden aldığı yeşil renginde, class değerini de kaldırırsak paragraf stilinden aldığı sarı renkte yazılacaktır.

Satır içi style özelliği kullanmanız tavsiye edilmez. Stil uygulamalarınızı mümkün olduğu kadar class özelliği üzerinden yapılmalıdır. Ve bir etiket için bir çok farklı class kombine etmek yerine kullandığınız yere özel class üretmeniz daha iyidir.

Kod Sıralaması

Eğer aynı öğeye aynı stil özelliği farklı değerlerde yazılmışsa, HTML yazılışına göre en son yazılan özellik değerini kullanır. 

p{ color: green; }
p{ color: red; }

Bu şekilde bir yazım olduğu zaman paragrafımız kırmızı renkte olacaktır. Fakat buradaki sıralama kullanımdaki öncelik sıralamasını değiştirmez.