CSS seçicilerini grupladığınızda, stil sayfanızdaki stilleri tekrar etmeden aynı stilleri birkaç farklı öğeye uygularsınız. Aynı şeyi yapan iki, üç veya daha fazla CSS kuralına (örneğin bir şeyin rengini kırmızıya ayarlayın) sahip olmak yerine, aynı şeyi gerçekleştiren tek bir CSS kuralı kullanırsınız. Bu verimliliği artıran taktiğin sırrı virgüldür.
CSS Seçicileri Nasıl Gruplandırılır
Bir stil sayfasında CSS seçicilerini gruplamak için stilde birden çok gruplanmış seçiciyi ayırmak için virgül kullanın. Bu örnekte, stil p ve div öğelerini etkiler: div, p { color: #f00; }
Bu bağlamda virgül “ve” anlamına gelir, dolayısıyla bu seçici tüm paragraf öğelerine ve tüm bölme öğelerine uygulanır. Virgül eksikse, seçici bunun yerine bir bölümün alt öğesi olan tüm paragraf öğelerine uygulanır. Bu farklı türde bir seçicidir, bu nedenle virgül önemlidir. Herhangi bir seçiciyi başka bir seçiciyle gruplayabilirsiniz. Bu örnek, bir sınıf seçiciyi bir kimlik seçiciyle gruplandırır: p.red, #sub { color: #f00; }
Bu stil, class özniteliğine sahip herhangi bir paragraf için geçerlidir. kırmızı ve ID özniteliği olan herhangi bir öğe (tür belirtilmediği için) alt. Tek sözcükten oluşan seçiciler ve bileşik seçiciler dahil olmak üzere istediğiniz sayıda seçiciyi gruplayabilirsiniz. Bu örnek dört farklı seçici içerir: p, .red, #sub, div a:link { color: #f00; }
Bu CSS kuralı şunlara uygulanır:
- Herhangi bir paragraf öğesi
- sınıfına sahip herhangi bir eleman kırmızı
- Kimliği olan herhangi bir öğe alt
- bağlantı bir bölümün soyundan gelen bağlantı elemanlarının sözde sınıfı.
Bu son seçici bir bileşik seçicidir. Gösterildiği gibi, bu CSS kuralındaki diğer seçicilerle kolayca birleştirilebilir. Kural rengini belirler #f00 (kırmızı) aynı sonucu elde etmek için dört ayrı seçici yazmaktan daha iyi olan bu dört seçicide.
Herhangi Bir Seçici Gruplandırılabilir
Herhangi bir geçerli seçiciyi bir gruba yerleştirebilirsiniz ve belgedeki gruplanmış tüm öğelerle eşleşen tüm öğeler, bu stil özelliğine dayalı olarak aynı stile sahip olacaktır. Bazı tasarımcılar, kodda okunabilirlik için gruplandırılmış öğeleri ayrı satırlarda listelemeyi tercih eder. Web sitesindeki görünüm ve yükleme hızı aynı kalır. Örneğin, virgülle ayrılmış stilleri tek bir kod satırında tek bir stil özelliğinde birleştirebilirsiniz: th, td, p.red, div#firstred { color: red; }
veya netlik için stilleri tek tek satırlarda listeleyebilirsiniz: th,
td,
p.kırmızı,
div#firstred
{
kırmızı renk;
}
Neden Grup CSS Seçicileri?
CSS seçicilerini gruplamak, stil sayfanızın boyutunu en aza indirmeye yardımcı olur, böylece daha hızlı yüklenir. Kuşkusuz, yavaş yüklemede ana suçlu stil sayfaları değildir; CSS dosyaları metin dosyalarıdır, bu nedenle çok uzun CSS sayfaları bile optimize edilmemiş resimlerle karşılaştırıldığında çok küçüktür. Yine de, her bir optimizasyon yardımcı olur ve CSS’nizden biraz boyut küçültebilir ve sayfaları çok daha hızlı yükleyebilirseniz, bu iyi bir şeydir. Gruplama seçicileri ayrıca site bakımını çok daha kolaylaştırır. Bir değişiklik yapmanız gerekiyorsa, birden çok kural yerine tek bir CSS kuralını düzenleyebilirsiniz. Bu yaklaşım zamandan ve zahmetten tasarruf sağlar. Sonuç olarak: CSS seçicilerini gruplamak verimliliği, üretkenliği, organizasyonu ve hatta bazı durumlarda yükleme hızını artırır.
mla apa chicago Alıntınızı Biçimlendirin
Kyrin, Jennifer. “Birden Çok CSS Seçicisini Gruplama.” Düşünce Şirketi, Mayıs. 14, 2021, thinkco.com/grouping-multiple-css-selectors-3467065.
Kyrin, Jennifer. (2021, 14 Mayıs). Birden Çok CSS Seçicisini Gruplama. https://www.thinktco.com/grouping-multiple-css-selectors-3467065 adresinden alındı
Kyrin, Jennifer. “Birden Çok CSS Seçicisini Gruplama.” Düşünce Şirketi https://www.thinktco.com/grouping-multiple-css-selectors-3467065 (29 Haziran 2021’de erişildi).
