Verimli kod yazarken, CSS seçicilerinizi yerleştirme şekliniz büyük bir fark yaratır. CSS seçicilerinizi düzgün bir şekilde yerleştirmek, birisi web sayfanızı ziyaret ettiğinde, karışık veya düzensiz kodla gelebilecek herhangi bir yaygara veya güçlük olmadan aradıkları deneyimi elde etmelerine yardımcı olur.
Bilgisayar biliminde genel olarak doğru olduğu gibi, aynı şeyi CSS’de gerçekleştirmenin birçok yolu vardır ve bazı yollar diğerlerinden daha etkilidir.
Daha verimli bir yol, CSS kurallarınızı iç içe yerleştirmektir, böylece öğeleri öğeler içinde hedefleyebilirsiniz – işte burada “birleştiriciler” devreye girer. Bir birleştiricinin ne yaptığını ve nasıl çalıştığını doğru anlayarak, hem kendiniz hem de diğer okuyucular için işleri basitleştirecek daha temiz kodlar oluşturabileceksiniz. Öyleyse hemen dalalım.
CSS Birleştirici Türleri
CSS3 dört tip birleştirici içerir: soyundan gelen birleştirici, alt birleştirici, bitişik kardeş birleştirici ve genel kardeş birleştirici. Her birini gözden geçirelim.
Önerilen makale: sosyal medya haberleri hakkında bilgi almak ve güncel sosyal medya haberlerine ulaşmak için ilgili sayfayı ziyaret edebilirsiniz.
Torun Birleştirici
Alt birleştirici, tek bir boşlukla ayrılmış iki seçici olarak yazılır ve ikinci seçicinin birinci seçiciden gelen (yani iç içe geçmiş) tüm örneklerini hedefler.
Örneğin, #my-div p soyundan gelen birleştirici, ilişkili kuralları div #my-div içindeki tüm <p> öğelerine uygular — aşağıya bakın.
Alt birleştirici, sayfanızın belirli bir bölümündeki bir öğenin tüm örneklerini biçimlendirmek istediğinizde iyi çalışır. Girişteki durumumuza geri dönersek, <main> bölümünüzün içindeki tüm <p> öğelerini bir şekilde ve sayfadaki diğer tüm <p> öğelerini farklı bir şekilde biçimlendirmek isteyebilirsiniz. Bu durumda, alt birleştirici ana p’yi kullanabilirsiniz.
Daha da önemlisi, alt öğe birleştiricisi, alt öğeler, bu alt öğelerin alt öğeleri vb. dahil olmak üzere bir öğenin diğerinin içine yerleştirilmiş her örneğini seçer.
Bununla birlikte, stili her zaman bu kadar derinlemesine uygulamak istemeyebilirsiniz – çocuk birleştiricinin devreye girdiği yer burasıdır.
Çocuk Birleştirici
Alt birleştirici, iki CSS seçici arasına yerleştirilen büyüktür simgesi (>) olarak yazılır. Bir öğenin, başka bir öğenin doğrudan alt öğeleri veya alt öğeleri olan tüm örneklerini hedefler. Stil çağlayanı, ilk yerleştirme düzeyinden sonra durur.
Aşağıdaki örnekte, <main> içindeki tüm paragraf metnini turuncu renklendirmek için bir alt birleştirici ve <main> öğesinin yalnızca alt paragraflarını daha büyük bir yazı tipi boyutuyla biçimlendirmek için bir alt birleştirici kullandım. Ana > p birleştiricisinin <div> öğesinin içindeki <p> öğesini nasıl etkilemediğine dikkat edin.
Bitişik Kardeş Birleştirici
Bitişik kardeş birleştirici, iki CSS seçici arasında artı işareti (+) olarak yazılır. Yalnızca birinci seçiciyle eşleşen bir öğeyi hemen takip ederse ikinci seçiciyle eşleşen bir öğeyi hedefler. Ek olarak, her iki öğe de aynı üst öğenin çocukları olmalıdır (ve bu nedenle “kardeş öğeler” olarak adlandırılır).
Aşağıda, doğrudan <h1>’i takip ettiği için ilk paragrafın stili nasıl aldığını görün. Ancak ikinci paragraf öyle değil.
Genel Kardeş Birleştirici
Genel kardeş seçici yaklaşık işareti (~) olarak yazılır ve belirli bir kardeş elemanı takip eden tüm elemanları hedefler. Bitişik kardeş seçicinin aksine, hedeflenen öğelerin ilk öğeyi hemen takip etmesi gerekmez.
Bu örnekte, tüm <p> öğelerinin stili, hepsi birbirine doğrudan bitişik olmasa da belgede <h1> ilerlediği için biçimlendirilmiştir.
Temiz CSS Yazma
CSS seçicilerinizi iç içe yerleştirmek, ileride işleri çok daha kolaylaştıran küçük bir numaradır. CSS’nizi daha hızlı yazacak, stil değişikliklerini daha verimli bir şekilde uygulayacak ve doğru HTML etiketlerine bir yığın id veya class niteliği yerleştirmeyi hatırlama konusunda endişelenmenize gerek kalmayacak.
Birleştiriciler doğru yapmak için biraz pratik yapacaklar. Ancak, CSS’de uzmanlaşmadan ve Bootstrap gibi bir çerçeveye geçmeden önce bunları öğrenmelisiniz — ön uç alet kemeriniz için kullanışlı bir numaradır.
Pazarlama Satış 