Okul yıllarına döndüm bir an. Türkçe derslerinde bir atasözü veya deyim verip bunu cümle içerisinde kullanın diye sorular çıkardı. Normalde kullanmadığımız veya az kullandığımız atasözü veya deyimleri biz genç dimağlara öğretmek adına sorulurdu bu sorular.
CSS’de de benzer şekilde nadiren kullandığımız özellikler var. İşin özüne gelelim. Ben şimdiye kadar hiç kullanmadığım Genel Kardeş Seçicilerini kullanma imkanı buldum. Kullandığım yerde bana çok büyük kolaylık sağladığı için sizlerle paylaşmak istedim.
Genel Kardeş Seçicileri; aynı seviyedeki elemanları yakalamak için CSS2.1’in bize sunduğu güzel özelliklerde güzel bir özellik. ie6’nın desteklememesi en büyük sorun idi. İnternet Explorer 6 sürümü desteğini kaldırdıktan sonra bu seçiciyi rahat rahat kullanabiliyoruz artık.
Karşıma çıkan iş ve Genel Kardeş Seçicisinin bana sağladığı kolaylık.
Şeklinde bir liste veya menümüz var. Burada her üç öğenin olduğu durumlarda var, sadece bir tanenin olduğu durumlarda. Tek bir eleman olduğunda aradaki çizgi yok. İki veya daha fazla eleman olduğunda iki eleman arasında bir çizgi konuyor.
Tam bu noktada Genel Kardeş Seçicileri devreye giriyor.
li ~ li {
border-top:1px solid red;
padding-top:5px;
margin-top:5px;
}Tanımı tüm dertlerimize son veriyor. Eğer tek eleman varsa bu seçici es geçiliyor. Ama iki veya daha fazla eleman var ise bu seçici devreye giri”“yor ve ilk eleman hariç tüm elemanların üstünü çiziyor ve mesafeleri ayarlıyor.
Daha önceleri javascript veya dinamik bir dil ile çözüm ürettiğimiz bu durum için CSS ile çözüm bulmak süper bir duygu.
Aynı sorunu first-child ile çözebileceğim aklıma geldi akşam bir an. Tabi iki satır kod bloğu oluyor. Minimum kod ile çözmek istersek Genel Kardeş Seçicilerini tercih edeceğiz. :D
Kalın sağlıcakla.