Bir öğenin son alt öğe dışındaki tüm alt öğelerini nasıl seçebilirim?

371

CSS3 seçicileri kullanan son çocuk hariç tümünü nasıl seçerim?

Örneğin, sadece son çocuğu almak olurdu div:nth-last-child(1).

css-selectors css

— RyanScottLewis
kaynak

689

Negatif sınıfını:not() , :last-childyalancı sınıfa karşı kullanabilirsiniz . Seviye 3 CSS Seçicileri tanıtıldığında, IE8 veya altında çalışmaz:

:not(:last-child) { /* styles */ }

— Nick Craver
kaynak

bu olduğu gibi kullanılır? İlk kolondan önce bir şey olmadan?

— johny neden

bunu normal temel seçicinize eklersiniz ( divOP örneğinde)

— Dallas

2

SASS kullananlar &:not(:last-child) { /* styles * }için, etkilemek istediğiniz öğenin içinde kullanabilirsiniz .

— Martin James

100

Basitleştir:

Tarzınızı tüm div öğelerine uygulayabilir ve sonuncuyu şununla yeniden başlatabilirsiniz : last-child :

örneğin CSS'de :

.yourclass{
    border: 1px solid blue;
}
.yourclass:last-child{
    border: 0;
}

veya SCSS'de :

.yourclass{
    border: 1px solid rgba(255, 255, 255, 1);
    &:last-child{
        border: 0;
    }
}

okunması kolay / hatırlanması
hızlı uygulama
tarayıcı uyumlu (hala CSS3 olduğundan IE9 +)

— Sebastien Horin
kaynak

6

En azından benim için bunun kötü bir kod kokusu var. Bilerek, istemediğiniz bir öğeye css kuralı uyguluyorsunuz, ancak daha sonra geri almak için başka bir katman oluşturmaya çalışıyorsunuz. Bana göre bu kötü bir kod kokusu. Ben css kodlama tür css korumak için daha zor ve daha zor yol açabilir korkuyorum. Başka bir deyişle, spagetti kodu css oluşturuyorsunuz.

— Alexander Bird

1

bu da işe yarayabilir, ancak sorun (kenarlık, renk, yazı tipi boyutu vb.) gibi birçok css stiliniz olduğunda, css stilini tekrar son-çocuğa başlatmanız gerekecektir. Yani uygun çözüm kullanıyor: değil (: son çocuk)

— davecar21

33

Nick Craver'ın çözümü işe yarıyor, ancak bunu da kullanabilirsiniz:

:nth-last-child(n+2) { /* Your code here */ }

CSS Tricks'ten Chris Coyier bunun için güzel bir test cihazı yaptı .

— Robin B
kaynak

Mozilla iyi bir tanımlamasına sahiptir : nth-last-child

— Clint Pachl

1

Bazı insanlar :notsözde çok pahalı olduğunu söylüyor . Bu nedenle, mümkün olduğunca bundan kaçınmaya çalışmak iyi bir fikir olabilir.

— Nörotransmitter

22

IE9 geldiğinde daha kolay olacak. Yine de, çoğu zaman sorunu gerektiren bir duruma geçirebilirsiniz: ilk çocuk ve elemanın karşı tarafını (IE7 +) şekillendirin.

— Nicholas Wilson
kaynak

10

Nick craver'ın çözümünü selectivizr ile kullanmak çapraz tarayıcı çözümüne izin verir (IE6 +)

— delphi
kaynak

1

en sondan öğeleri bulmak için

<style>
ul li:nth-last-of-type(3n){ color:#a94442}  /**/
</style>

— Avinash Malhotra
kaynak

1

Nick Craver'ın çözümü bana ihtiyacım olanı verdi, ancak CSS-in-JS kullananlara açıklık getirmek için:

const styles = {
  yourClass: {
    /* Styles for all elements with this class */
    '&:not(:last-child)': {
      /* Styles for all EXCEPT the last element with this class */
    },
  },
};

— maddRobot
kaynak

1

.nav-menu li:not(:last-child){
    // write some style here
}

bu kod stili herkese uygulamalıdır

son çocuk hariç

— RyanGonzalezUSA
kaynak