Modern CSS ile:nth-child() Yeniden Yazılması

CSS'in:nth-child() seçicisi uzun yıllardır öğe seçiminin temel taşı olmuş, ama modern CSS özellikleri bize çok daha esnek alternatifler sunuyor. Style queries ve sibling-index() gibi yeni araçları birleştirerek, daha dinamik ve güçlü seçim mantığı kurabiliriz.

Geleneksel:nth-child() sabit bir formüle dayalı çalışır, 3n+1 gibi. Ama gerçek dünyada bazen bir öğenin konumu kadar, çevresi ve bağlamı önemli olur. Style queries sayesinde bir üst öğenin stiline bakarak koşullu seçimler yapabilirsin. Mesela, eğer kapsayıcı belirli bir genişliğe sahipse, çocuk öğelere farklı stil uygula. sibling-index() ise bir öğenin kaç numaralı kardeş olduğunu dinamik olarak belirler; bu da daha akıllı sıralama senaryoları açar.

Pratik örnek: Bir galeri düzeninde, ekran genişliğine göre sütun sayısı değişiyorsa,:nth-child(3n) ile sabit seçim yapamayız. Bunun yerine style queries kullanarak kapsayıcının grid-template-columns değerini sorgulayabilir, ona göre renkler veya boşluklar ayarlayabilirsin. sibling-index() ile de "bu 5. öğe" bilgisini CSS'te dinamik olarak kullanabilirsin.

Bu yaklaşımın güçlü yanı: JavaScript'e ihtiyaç duymadan, tamamen CSS'te bağlamsal seçimler yapmak. Tarayıcı desteği hâlâ yeni özellikler için sınırlı olsa da, modern projelerde progressive enhancement stratejisiyle kullanılabilir.:nth-child() hâlâ geçerli ve basit durumlar için yeterli ama, karmaşık düzenler ve dinamik içerikte bu yeni yöntemler sana çok daha fazla kontrol veriyor.