CSS: not (: last-child): setelah pemilih

370

Saya memiliki daftar elemen, yang ditata seperti ini:

ul {
    list-style-type: none;
    text-align: center;
}

li {
    display: inline;
}

li:not(:last-child):after {
    content:' |';
}

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

Luaskan cuplikan

Adakah yang tahu cara memilih semua CSS kecuali elemen terakhir?

Anda dapat melihat definisi :not()pemilih di sini

css css-selectors pseudo-element Matt Clarkson
sumber

1

Perilaku ini tampaknya menjadi bug di Chrome 10. Ini berfungsi untuk saya di Firefox 3.5.

duri

6

Sebenarnya hanya menjalankan cuplikan di 2018 dengan Chrome terbaru dan bekerja seperti yang diharapkan.

atoth

433

Jika ada masalah dengan pemilih yang tidak, Anda dapat mengatur semuanya dan menimpa yang terakhir

li:after
{
  content: ' |';
}
li:last-child:after
{
  content: '';
}

atau jika Anda dapat menggunakannya sebelumnya, tidak perlu untuk anak terakhir

li+li:before
{
  content: '| ';
}

imma
sumber

12

Ini sebenarnya satu-satunya cara untuk membuatnya bekerja sejauh IE8 (maaf, tidak ada cheetos untuk IE7 dan sebelumnya). li:not(:first-child):beforeagak terlalu menakutkan untuk ditangani oleh versi Internet Explorer yang lebih lama.

Sandy Gifford

240

Setiap hal tampaknya benar. Anda mungkin ingin menggunakan pemilih css berikut alih-alih apa yang Anda gunakan.

ul > li:not(:last-child):after

Vivek
sumber

4

@ScottBeeson Ini adalah awnser terbaik untuk peramban modern, tetapi pekerjaan jawaban yang diterima dengan peramban lama. (Saya setuju dengan Anda, ini harus diterima)

Arthur

25

Contoh Anda sebagai tulisan berfungsi dengan baik di Chrome 11 untuk saya. Mungkin browser Anda tidak mendukung :not()pemilih?

Anda mungkin perlu menggunakan JavaScript atau yang serupa untuk menyelesaikan cross-browser ini. jQuery mengimplementasikan : not () di API pemilihnya.

Liza Daly
sumber

8

Saya memecahkan ini dengan melakukan li:not(:first-child):beforedan menambahkan bilah vertikal sebelumnya. Saya sedang bekerja dengan versi stabil Chrome yang tampaknya tidak mendukung anak terakhir. Membangun Canary tidak. Terima kasih atas jawabannya.

Matt Clarkson

Sepertinya Chrome tidak mendukungnya bahkan di tahun 2013?

MikkoP

20

Contoh menggunakan CSS

  ul li:not(:last-child){
        border-right: 1px solid rgba(153, 151, 151, 0.75);
    }

Lorena Pita
sumber

20

Bagi saya itu berfungsi dengan baik

&:not(:last-child){
            text-transform: uppercase;
        }

Ashad Nasim
sumber

1

Jawaban ini mungkin lebih terkait dengan SCSS daripada CSS.

Chris Walsh

10

Sampel Anda tidak berfungsi di IE untuk saya, Anda harus menentukan header Doctype dalam dokumen Anda untuk membuat halaman Anda dengan cara standar di IE untuk menggunakan properti CSS konten:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

</html>

Cara kedua adalah menggunakan penyeleksi CSS 3

li:not(:last-of-type):after
{
    content:           " |";
}

Tetapi Anda masih perlu menentukan DOCTYPE

Dan cara ketiga adalah menggunakan JQuery dengan beberapa skrip seperti berikut:

<script type="text/javascript" src="jquery-1.4.1.js"></script>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

<script type="text/javascript">
  $(document).ready(function () {
      $("li:not(:last)").append(" | ");
    });
</script>

Keuntungan dari cara ketiga adalah Anda tidak perlu menentukan doctype dan jQuery akan menjaga kompatibilitas.

Martin Kunc
sumber

6

<! DOCTYPE html> adalah standar HTML5 baru.

Matt Clarkson

1

Ini adalah cara yang luar biasa dan modern untuk menangani ini. Saya sedang bergumul dengan: anak terakhir, kemudian saya menemukan jawaban Anda. Yang ini sempurna! : not (: jenis terakhir): setelah

Firze

1

Hapus: sebelum anak terakhir dan: setelah dan digunakan

 ul li:not(last-child){
 content:' |';
}

Semoga itu berhasil

Jaylukmann
sumber

-2

Anda dapat mencoba ini, saya tahu bukan jawaban yang Anda cari tetapi konsepnya sama.

Di mana Anda mengatur gaya untuk semua anak dan kemudian menghapusnya dari anak terakhir.

Cuplikan Kode

li
  margin-right: 10px

  &:last-child
    margin-right: 0

Gambar

Yashu Mittal
sumber

2

Hai, bolehkah saya tahu editor apa ini? Itu terlihat bagus.

Zanecat

Ini adalah sepotong kecil kode dan siapa pun dapat dengan mudah mengingat dan mengetiknya.

Yashu Mittal

CSS: not (: last-child): setelah pemilih

Jawaban: