Bagaimana saya bisa memilih semua anak dari suatu elemen kecuali anak terakhir?

Bagaimana saya memilih semua kecuali anak terakhir yang menggunakan penyeleksi CSS3?

Misalnya, untuk mendapatkan hanya anak terakhir akan div:nth-last-child(1).

Anda dapat menggunakan negasi pseudo-class:not() terhadap :last-childpseudo-class . Saat diperkenalkan CSS Selectors Level 3, itu tidak berfungsi di IE8 atau di bawah:

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

Sederhanakan:

Anda dapat menerapkan gaya Anda ke semua div dan inisialisasi ulang yang terakhir dengan : last-child :

misalnya dalam CSS :

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

atau dalam SCSS :

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

• mudah dibaca / diingat
• cepat untuk dieksekusi
• kompatibel dengan browser (IE9 + karena masih CSS3)

Solusi Nick Craver bekerja tetapi Anda juga dapat menggunakan ini:

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

Chris Coyier dari CSS Trik membuat penguji yang bagus untuk ini.

Ketika IE9 datang, akan lebih mudah. Namun, sering kali, Anda dapat mengalihkan masalah ke masalah yang memerlukan: anak pertama dan gaya sisi yang berlawanan dari elemen (IE7 +).

Menggunakan solusi nick craver dengan selectivizr memungkinkan untuk solusi lintas browser (IE6 +)

untuk menemukan elemen dari yang terakhir, gunakan

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

Solusi Nick Craver memberi saya apa yang saya butuhkan tetapi membuatnya eksplisit bagi mereka yang menggunakan CSS-in-JS:

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

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

kode ini harus menerapkan gaya ke semua