Birkaç ul
etiketi içeren bir div
etiketim var.
Yalnızca ilk ul
etiketi için CSS özelliklerini ayarlayabiliyorum:
div ul:first-child {
background-color: #900;
}
Ancak, ilki hariç diğer tüm ul
etiketleri için CSS özelliklerini ayarlamaya yönelik aşağıdaki girişimlerim işe yaramıyor:
div ul:not:first-child {
background-color: #900;
}
div ul:not(:first-child) {
background-color: #900;
}
div ul:first-child:after {
background-color: #900;
}
CSS'de nasıl yazabilirim: "ilk hariç her öğe"?
Gönderdiğiniz sürümlerden biri tüm modern tarayıcılar için [aslında çalışıyor][1] (CSS seçicileri seviye 3 destekleniyor):
div ul:not(:first-child) {
background-color: #900;
}
Eski tarayıcıları desteklemeniz gerekiyorsa veya :not
seçicisinin sınırlaması (argüman olarak yalnızca basit seçici kabul eder) sizi engelliyorsa başka bir teknik kullanabilirsiniz:
Amaçladığınızdan daha geniş bir kapsama sahip bir kural tanımlayın ve ardından "iptal" edin ve kapsamını amaçladığınız şeyle sınırlandırın:
div ul {
background-color: #900; /* applies to every ul */
}
div ul:first-child {
background-color: transparent; /* limits the scope of the previous rule */
}
Kapsamı sınırlandırırken, ayarladığınız her CSS niteliği için varsayılan değer kullanın.
Bu CSS2 çözümü ("any ul
after another ul
") de çalışır ve daha fazla tarayıcı tarafından desteklenir.
div ul + ul {
background-color: #900;
}
notve
:nth-sibling`in aksine, adjacent sibling selector IE7+ tarafından desteklenmektedir.
Sayfa yüklendikten sonra JavaScript bu özellikleri değiştiriyorsa, bunun IE7 ve IE8 uygulamalarında bilinen bazı hatalara bakmalısınız. Bu bağlantıya bakın.
Herhangi bir statik web sayfası için bu mükemmel şekilde çalışmalıdır.
Not` IE6-8 tarafından kabul edilmediğinden, size şunu öneririm:
div ul:nth-child(n+2) {
background-color: #900;
}
Böylece, ana öğesindeki ilki hariç her ul
yi seçersiniz.
Daha fazla `nth-child' örneği için Chris Coyer'in "Faydalı :nth-child Tarifleri" makalesine bakın.