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

371

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

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

css-selectors css

— RyanScottLewis
sumber

690

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 */ }

— Nick Craver
sumber

ini digunakan apa adanya? Tanpa apa pun sebelum usus besar pertama?

— Johnny mengapa

Anda akan menambahkan ini ke pemilih basis normal Anda ( divdalam contoh OP)

— Dallas

2

Bagi mereka yang menggunakan SASS, Anda bisa menggunakan &:not(:last-child) { /* styles * }bagian dalam elemen yang ingin Anda pengaruhi.

— Martin James

100

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)

— Sebastien Horin
sumber

6

Bagi saya setidaknya, ini memiliki bau kode yang buruk. Anda secara sadar menerapkan aturan css ke elemen yang tidak Anda inginkan, hanya kemudian mencoba membuat kue lapisan lain untuk membatalkannya. Bagi saya, itu bau kode yang buruk. Saya khawatir bahwa jenis css coding dapat menyebabkan semakin sulit untuk mempertahankan css. Dengan kata lain, Anda sedang membuat kode spaghetti css.

— Alexander Bird

1

ini juga bisa berfungsi tetapi masalahnya adalah ketika Anda memiliki banyak gaya css seperti (batas, warna, ukuran font, dll.) Anda perlu menginisialisasi gaya css lagi ke: last-child. Jadi solusi yang cocok adalah menggunakan: not (: last-child)

— davecar21

33

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.

— Robin B
sumber

Mozilla memiliki definisi yang baik tentang : nth-last-child

— Clint Pachl

1

Beberapa orang mengatakan bahwa :notpseudo sangat mahal. Jadi mungkin ide yang baik untuk mencoba menghindarinya jika memungkinkan.

— Neurotransmitter

22

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 +).

— Nicholas Wilson
sumber

10

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

— delphi
sumber

1

untuk menemukan elemen dari yang terakhir, gunakan

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

— Avinash Malhotra
sumber

1

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 */
    },
  },
};

— maddRobot
sumber

1

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

kode ini harus menerapkan gaya ke semua

kecuali anak terakhir

— RyanGonzalezUSA
sumber