not: birinci çocuk seçici

Birkaç divetiketi içeren bir etiketim varul .

ulYalnızca ilk etiket için CSS özelliklerini ayarlayabiliyorum :

div ul:first-child {
    background-color: #900;
}

Ancak, aşağıdaki ulilk etiket dışında birbirleri için CSS özelliklerini ayarlamaya çalışır:

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 öğe hariç her öğe"?

Yayınladığınız versiyonlarından biri gerçekten çalışıyor (tüm modern tarayıcılar için CSS seçicileri düzey 3 edilir desteklenir ):

div ul:not(:first-child) {
    background-color: #900;
}

Eski tarayıcıları desteklemeniz gerekiyorsa veya :notseçicinin sınırlamasından etkileniyorsanız (yalnızca basit bir seçiciyi bağımsız değişken olarak kabul eder ) başka bir teknik kullanabilirsiniz:

Hedeflediğinizden daha geniş kapsamı olan bir kural tanımlayın ve ardından kapsamını amaçladığınız şeyle sınırlayarak koşullu olarak "iptal edin":

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 özelliği için varsayılan değeri kullanın .

Bu CSS2 çözümü (" ulbirbiri ardına ul") da çalışır ve daha fazla tarayıcı tarafından desteklenir.

div ul + ul {
  background-color: #900;
}

Farklı olarak :notve :nth-sibling, bitişik kardeş seçici IE7 + tarafından desteklenmektedir.

Eğer varsa JavaScript sayfa yüklendikten sonra, bu özellikleri değiştirir, içeri bilinen bazı hatalar bakmak gerekir IE7 ve IE8 bu uygulamaları. Bu bağlantıya bakın .

Herhangi bir statik web sayfası için, bu mükemmel bir şekilde çalışmalıdır.

Yana :nottarafından kabul edilmeyen IE6-8 , sana bu öneririm:

div ul:nth-child(n+2) {
    background-color: #900;
}

Böylece , birincisi dışındaul ana öğesindeki her şeyi seçersiniz .

Daha fazla örnek için Chris Coyer'ın "Yararlı: n. Çocuk Tarifler" makalesine bakın .nth-child

div li~li {
    color: red;
}

IE7'yi destekler

not(:first-child)artık işe yaramıyor gibi görünüyor. En azından Chrome ve Firefox'un daha yeni sürümleriyle.

Bunun yerine şunu deneyin:

ul:not(:first-of-type) {}

İle herhangi bir seçici kullanabilirsiniz not

p:not(:first-child){}
p:not(:first-of-type){}
p:not(:checked){}
p:not(:last-child){}
p:not(:last-of-type){}
p:not(:first-of-type){}
p:not(:nth-last-of-type(2)){}
p:not(nth-last-child(2)){}
p:not(:nth-child(2)){}

Yukarıdakilerin bazıları ile şansım olmadı,

Benim için gerçekten işe yarayan tek kişi buydu

ul:not(:first-of-type) {}

Sayfada görüntülenen ilk düğmenin kenar boşluğu bırakma seçeneğinden etkilenmemesini sağlamaya çalıştığımda bu benim için çalıştı.

bu ilk denediğim seçenekti ama işe yaramadı

ul:not(:first-child)

Seçicinizi aşağıdaki :notgibi kullanabilirsiniz, içindeki herhangi bir seçiciyi kullanabilirsiniz:not()

any_CSS_selector:not(any_other_CSS_selector){
    /*YOUR STYLE*/
}

:notüst seçici olmadan da kullanabilirsiniz .

   :not(:nth-child(2)){
        /*YOUR STYLE*/
   }

Daha fazla örnek

any_CSS_selector:not(:first-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:checked){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-of-type(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-child(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-child(2)){
    /*YOUR STYLE*/
}

Kullandığım gibi ul:not(:first-child)mükemmel bir çözüm.

div ul:not(:first-child) {
    background-color: #900;
}

Bu neden mükemmel? Çünkü kullanarak ul:not(:first-child), iç elemanlara CSS uygulayabiliriz. Sevmekli, img, span, a etiketler vs.

Ancak diğerleri kullanıldığında çözümler:

div ul + ul {
  background-color: #900;
}

ve

div li~li {
    color: red;
}

ve

ul:not(:first-of-type) {}

ve

div ul:nth-child(n+2) {
    background-color: #900;
}

Bunlar sadece ul seviyesi CSS'yi kısıtlar. Diyelim ki CSS'yi li`` div ul + ul li '' olarak uygulayamayız .

İç seviye elemanları için ilk Çözüm mükemmel çalışır.

div ul:not(:first-child) li{
        background-color: #900;
    }

ve bunun gibi ...