Tek örnekte CSS seçicileri

Yıllar önce ilk kez bir CSS dosyası gördüğümde, koddan farklı göründüğünden olsa gerek, kendisine pek de sıcak bakmamıştım. Bu kısa yazımda yeni başlayanlar için (daha doğrusu henüz başlamamış olanlar ve başlamaya çekinenler için) basit bir örnekte CSS seçicilerinin çalışma mantığını, birkaç püf noktası vererek yüzeysel olarak anlatmaya çalışacağım. Laf kalabalığı yapıp, tanım vererek uzatmaya bile gerek yok.

Seçiciler öğe adı, id’si, sınıfı veya diğer bir özniteliğini (name, id, class vs…) kullanarak bir html öğesini bulmaya yararlar.

Şimdi yukarıdaki CSS’in nasıl işlediğine parça parça bakalım:

1)

#menu li {
    font-weight: bold;
}

“body #menu li” seçicisi id’si menü olan elementin altındaki tüm li elementlerini seçiyor.

Birbirinden boşluk ile ayrılan seçicilerin, iç içe geçmiş html öğelerini simgelediklerini görebilirsiniz.

Buradan ayrıca #id seçicisinin yazımını öğreniyoruz. Html’de öğenin özniteliği id=”menu” olarak belirtiliyor ise css’de seçici #menu olarak yazılıyor.

Tüm meyve ve sebzelerin fontu bold olarak ayarlanıyor.

2)

#portakal, #menu .sebze {
    font-weight: normal;
}

Burada iki ayrı seçici grubu arada virgül ile yazılmış. Böylece bu yazımı da öğreniyoruz.

“#menu .sebze” seçicisi çalışıyor ve lahananın fontu bold’dan tekrar normale dönüyor.

Buradan da .class seçicisinin yazımını öğreniyoruz. Html’de öğenin özniteliği class=”sebze” olarak belirtiliyor ise css’de seçici .sebze şeklinde yazılıyor.

Buradan öğreneceğimiz diğer kavram ise seçici özgüllüğü. “#menu li” seçicisi kendisinden sonraki “#portakal” seçicisinden daha özgül olduğu için, portakal hala bold olarak kalıyor.

Benzer şekilde “#id” seçisisi “.class” seçicisinden daha özgül, “.class .class” şeklinde iki öğeli bir seçici de “.class” şeklindeki seçiciden daha özgüldür. * *

3)

.fruit {
    color: #ff0000;
}

Üçüncü aşamada “.meyve” seçicisi ile tüm meyveler seçilip kırmızı yapılıyor.

Html yazımında aynı birden çok element aynı sınıfta olabilirken, aynı id’den sadece bir adet olabiliyor.

Birden çok html öğesi aynı class özniteliğine sahip olabilirken, aynı id özniteliği yalnız bir html öğesine verilebiliyor.

4)

#menu #uzum{
    color: #ff00ff;
}

Bu aşamada “#menu #uzum” seçicisi ile üzüm mor renk yapılıyor. Bu seçici, bir önceki “.meyve” seçicisinden daha baskın.

5)

#menu li.yesil {
    color: #009900;
}

Son aşamada ise “#menu li.yesil” seçicisi ile lahana seçilip yeşil yapılıyor.

Bu seçici #menu altındaki öğelerden yalnızca “yesil” sınıfındaki “li” yi seçiyor. Bu örneği de boşluk konulmayacak yeri, yazımı göstermek üzere ekledim.

Örnekte seçici mantığının anlaşılması açısından sadece #id ve .class seçicilerini kullandım.

Diğer seçicilere şu adreslerden bakabilirsiniz: * *

Tanımı gereği basamaklı şablonlardan oluşan CSS’de, bir HTML öğesinin hangi seçici veya seçiciler tarafından etkilendiğini anlamak, seçici özgüllüğü konusu da hesaba katılınca, her zaman bu örnekteki gibi kolay olmayabilir.

Bu noktada kullandığımız tarayıcının geliştirici araçları yardıma koşuyor. Mozilla Firefox ve Google Chrome tarayıcılarında F12 (veya Ctrl + Shift + I) tuşlarına basarak, Microsoft Edge ile F12 tuşuna basarak geliştirici araçlarını görüntüleyebilirsiniz.

Çalışma mantıkları aşağı yukarı aynıdır. Ok işaretiyle ilgili html öğesini ekrandan görsel olarak seçebilir, hangi seçicilerden etkilendiğini sağdaki CSS kısmından görüntüleyebilirsiniz. Ayrıca buradan CSS kodlarını manuel olarak değiştirebilir, sonuçları anında görebilirsiniz.

Kaynaklar:

https://www.w3schools.com/cssref/css_selectors.asp
https://www.w3.org/TR/css3-selectors/
http://jsfiddle.net/vkucukcakar/9w9k719j/

Kaynak: https://volkan.xyz

 

Bu yazıyı yalnızca kaynak göstererek ve önceden belirtilen Kullanım Koşulları altında paylaşabilirsiniz.

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir