CSS nth-child Seçicisi Kullanımı

CSS nth-child Seçicisi Kullanımı

CSS kodları ile belirli aralıklarla HTML elementlerinin nasıl seçileceğinden bahsedeceğim. Düzenli bir şekilde seçim yapabilmek için nth-child seçicisi kullanılmaktadır. Örnek olarak bir HTML yapısı oluşturalım ve belirli aralıklarla seçimi gerçekleştirelim.

<style>
.kapsa .secim{color:#fff;width:50px; padding:10px; margin:5px; float:left; background:red;text-align:center}
</style>

<div class="kapsa">
   <div class="secim">1</div>
   <div class="secim">2</div>
   <div class="secim">3</div>
   <div class="secim">4</div>
   <div class="secim">5</div>
   <div class="secim">6</div>
   <div class="secim">7</div>
   <div class="secim">8</div>
   <div class="secim">9</div>
</div>

Yukarıda yer alan HTML ve CSS yapısını ana örnek olarak elimizde tutacağız. Bu hazırladığımız örnek üzerinden nth-child seçicisini kullanarak, seçimlerin daha akla yatkın olmasını sağlayacağız.

Hazırlamış olduğumuz örneğin sonucu yukarıdaki gibi olacaktır. Şimdi bu örnekte yer alan kutucukları seçici yardımı ile farklı sonuçlar elde edelim.

Tüm Elemenları Seçme

İlk olarak tüm elementleri seçmekten başlayalım. Tüm elementleri seçmek için :nth-child(n) ifadesi kullanılmaktadır. Buradaki n değeri toplam değer anlamındadır ve otomatik olarak algılanarak işlem yapılır.

.kapsa .secim:nth-child(n){
   background: yellow;
   color:#000;
}

Yukarıda yer alan kodu çalıştırdığımızda aşağıdaki sonucu elde etmiş olacağız.

Yukarıda yer alan çıktıdaki gibi tüm elementlerin arkaplanı sarı ve renkleri siyah olacaktır. Yani başarılı bir şekilde tüm alanları seçmiş oluyoruz.

Doğrudan Element Seçme

Doğrudan hedef alınarak bir elementi seçmek için :nth-child(x) ifadesi kullanılmaktadır. Burada yer alan x yerine elementin sırası yazılarak işlem yapılabilir.

.kapsa .secim:nth-child(7){
   background: yellow;
   color:#000;
}

Örneğe ek olarak yukarıdaki CSS kodlarını yazdığımızda .secim elementinin yedinci değeri seçilerek sarı arkaplana ve yazı rengi siyaha dönüştürülecektir.

Tam olarak yukarıda yer alan görseldeki gibi olacaktır.

İlk 3 Elementi Seçme

Baştan başlayarak belirli bir yere kadar elementleri seçmek için :nth-child(-n+3) ifadesi kullanılmaktadır. Toplam değer negatif belirlenir ve kaça kadar sayılacaksa n değerine ekleme yapılır.

.kapsa .secim:nth-child(-n+3){
   background: yellow;
   color:#000;
}

Bu şekilde tanımlama yapıldığında ilk 4 element seçilecektir.

Görselde yer aldığı gibi toplam değer hesaplanıp ilk 3 değer için değişiklik sağlanmaktadır.

Eşit Aralıklarla Seçim Yapma

Eşit aralıklardan kastım, elementlerin 2 şey 2 şey, 3 er 3 er gibi belirli aralıklarla seçilmesidir. Belirli aralıklarla seçim yapmak için :nth-child(xn) ifadesi kullanılır. Örnekte yer alan x değeri aralık değerini temsil eder.

.kapsa .secim:nth-child(3n){
   background: yellow;
   color:#000;
}

Yukarıdaki gibi kullanıldığında 3 er 3 er sayıl yapılacaktır. Her 3.değer için CSS işlemi uygulanacaktır.

Yukarıdaki örneğin sonucunda da 3 er 3 er elementler seçilip CSS işlemi yapılmaktadır.

Belirli Yerden Seçim Yaparak Aralıklı Seçim Yapma

Başlangıç değeri belirtilerek ondan sonraki elementler için belirli aralıklarla seçim yapmak için :nth-child(xn+y) ifadesi kullanılmaktadır. Kullanımda yer alan x değeri katları, y değeri ise başlangıç değerini belirtmektedir.

.kapsa .secim:nth-child(3n+2){
   background: yellow;
   color:#000;
}

Yukarıdaki örnekte 3er 3er ilerleme yapılırken başlangıç noktarsı 2 olarak belirlenmiştir.

Yukarıdaki görselde de yer aldığı gibi başlangıç değeri 2, artış miktarıda 3 olarak görünmektedir.

Tek ve Çift Seçimi Yapma

Seçim için 2,4,6,8.. gibi alanları seçmek için even kullanılmaktadır. 1,3,5,7.. gibi seçimler içinse odd değeri kullanılmaktadır.

// Çift seçim yapar
.kapsa .secim:nth-child(even){
   background: yellow;
   color:#000;
}
// Tek seçim yapar
.kapsa .secim:nth-child(odd){
   background: yellow;
   color:#000;
}

Yukarıdaki örnek uygulandığında, tek yada çift değerlerin seçimi yapılacaktır.

İki Farklı Sektör Kullanımı

İki farklı sektör kullanarak, baştan ve sonra filtreleme yapabilirsiniz. Örneğin baştan 2 değeri es geçelim aynı zamanda sonradan 2 değeri de almayalım. Bu tarz bir seçimi için iki farklı tanımlama yapmak gerekecektir.

.kapsa .secim:nth-child(n+3):nth-child(-n+7){
   background: yellow;
   color:#000;
}

Yukarıdaki örnekte ifade edilen n+3 değeri ile seçici 3,4,5,6,7,8,9 değerlerini seçecektir. Fakat sonra yer alan 8 ve 9 değerini istemediğim için tekrar :nth-child() ifadesini kulanıyoruz. Bu ifade de –n+7 değerini tanımlıyoruz. Bu tanımlama da 1,2,3,4,5,6,7 sonuçlarını verecektir. İkili kullanımlarda aradaki fark silinecektir. Yani 1,2 ve 8,9 değerleri pas geçilerek sonuç elde edeilecektir.

Biraz karmaşık olan kod yapısının çıktısı yukarıdaki gibi olacaktır. Aslına bakarsanız oldukça zevkli biri şekilde seçimler gerçekleştirilmektedir. Burada n mantığını anladıktan sonra sorun kalmıyor bence.

Exit mobile version