Evet arkadaşlar bu gün sizlere bir çok yerde karşılaşmadığımız bazı seçici kardeşlerden bahsetmek istiyorum. Aslında kardeş değiller de benzerliklerinden dolayı böyle isim verdim. Nth diye başlayan 4 tane erkek kardeş ve only ile başlayan iki kız kardeşten oluşan 6 kişilik anneleri babaları olmayan bir aile olarak düşünebilirsiniz bunları 🙂

Şimdi gel gelelim bunların faydalarına. Diyelim ki bir div sınıfı veya id oluşturdunuz ve bunun içine de liste şeklinde sınıf atanmamış olan html etiketler (p, a, li, ul, ol vs.) atadınız. Ayrıca bu divleri listeleri ile beraber sitenizdeki bütün yazılarınıza eklediniz özel alan kullanmadan. Gün gelir de bunların her birine farklı genişlikler, renkler ve boyutlar vermek isterseniz eğer ya sitenizin mysql dosyasını indirip bütün elementlere sırasıyla sınıf atarsınız ya da bu kardeşlerden bazılarını kullanırsınız. Mesela kendi sitemde kullandığım demo ve download butonlarının her biri için ayrı bir id atanmış #mantaro1, #mantaro2, #mantaro3 diye. O zamanlar aklıma bu kardeşler gelmediğinden dolayı böyle yapmıştım ilerde zorluk çıkmasın ve stil dosyaları üzerinden kolaylıkla düzenleme imkanı olsun diye., Öyle yapmamış olsaydım bile nth seçicilerini kullanarak istediğim değişikliği vurgulayabilirdim.

Bu kardeşlerin her birinin farklı yetkileri var. Baştan ve sondan başlayanlar var bir de tekil olan etiketlere vurgulama yapmamızı sağlayanlar var. Kız kardeşler tekil olanlara erkek kardeşler de sondan ve baştan sıralamaya göre iş yaparlar.

Css :nth-child(1) kullanımı :

Bir rakamından başlayarak devam eden listenin her birine farklı değerler atamanıza olanak sağlıyor. Kullandığınız etiketlerin özellikleri birbirine benziyor ise sıralamada değişiklik olmaz. Örneğin H ve p etiketleri yazılar için kullanılırlar. En üstte H1 etiketi var ve hemen arkasında p etiketi var siz de  ilk p etiketine bir değer vermek istiyorsanız :nth-child(2) şeklinde ayarlamalalısınız. Eğer hepsi p etiketi ise nth-child (1) şeklinde yapmanız gerekiyor. Parantez içindeki rakamlar özellik ekleyeceğiniz sıralamayı temsil eder. Aşağıdaki demoda ikinci sıradaki p etiketine pembe ve beşinci sıradaki p etiketine de sarı rengi veriyoruz.

H1 etiketine herhangi değer atamadık ve p:nth-child(1) şeklinde ayarlasak bile H1 etkilenmeyecektir. H1’i değiştirmek için de H1:nth-child(1) şeklinde ayarlamamız gerekiyor.

IE8’den önceki tarayıcılar  :nth-child() seçicisini desteklemez. 

Css :nth-last-child(1) kullanımı:

Bundan önceki baştan başlıyorken last-child sondan başlar. 1 yaptığınız zaman en sondaki olanı birinci olarak ele alır ve bu şekilde en baştakini seçmek için de sırasına göre bir numara vermeniz gerekir.  Az öncekini p ile denedik. Şimdikini de li etiketi ile deneyelim. En sondaki li etiketini mavi ve sondan dördüncü olanı da gri olarak ayarlayalım.

 IE8?den önceki tarayıcılar  :nth-last-child() seçicisini desteklemez. 

:nth-last-of-type()  ve :nth-last-child() kullanımı aynıdır. Her ikisi de sondan başlayarak ayarlama yapan seçicilerdir. Aslında ufak farklar vardır ama örnek olarak gösterecek olursan ilk verdiğim örnekte H1 etiketini göz ardı etmeden numaralandırmamız gerektiğini söylemiştim. H1 ile yazılmış cümleler p etiketinden daha büyük olur ve haliyle kimse p den sonra H1 eklemez. Eğer p den sonra H1 veya benzeri bir şey eklemişseniz :nth-last-of-type() seçicisini :nth-child() de verdiğimiz örnek gibi kullanabilirsiniz.

Css :nth-of-type(1)  kullanımı:

:nth-of-type () seçicisi de :nth-child() olduğu gibi en üstten başlar ama :nth-child() de olduğu gibi benzer tagları göz önüne almaz. Önünde H1, H2, H3 vs taglar olsa dahi belirlemiş olduğunuz tag için 1 rakamını verdiğinizde o tag ile listelenmiş olan en üstteki içeriği ele alır. Aşağıdaki demodan H den sonra ilk p tagını yeşil ve üçüncüsüne de kırmızı olarak ayarlayalım.

Dikkat ettiyseniz ilk demoda H tagları göz ardı edilmiyordu ve ona göre numara eklememiz gerekiyordu. Bu örnekte sadece p taglarının sırasına göre numara verdik.

Css :only-child  ve :only-of-type kullanımı:

Evet erkek kardeşlerin kullanımı buraya kadardı. Sıra geldi :only-child  ve :only-of-type isimli uyuz kız kardeşlere.  Her ikisinin kullanımı ve özellikleri arasında herhangi bir fark yoktur. Her ikisi de aynı görevi görür ancak :only-child IE8’den önceki tarayıcılar tarafından desteklenmez. Neye yaradığına gelince diyelim ki bir div içine iki tane li eklendiniz ve bir tane div içine de bir tane li eklediniz. Siz sadece div içinde bir tane li tagı olan sıraya değişiklik eklemek istiyorsanız bu kodları kullanabilirsiniz. Eğer on tane ayrı div içine tek bir li eklemiş iseniz belirleyeceğiniz seçenekler hepsinde çalışacatır ve bir div içinde iki veya daha fazla li tagı olanlar da göz ardı edilecektir.

Buradaki örnekte birinci, dördüncü ve beşinci sıradaki li taglarının her birini ayrı div içine alarak arkaplan rengini :only-child  ile gri yaptık. İkinci ve üçüncü sıradaki li taglarını da tek bir div içine aldık. Sonuç olarak ikinci ve üçüncü etkilenmedi ama birinci, dördüncü ve beşinci sıradakilerin arkaplan rengi gri oldu.