CSS: not (: last-child): dopo il selettore

370

Ho un elenco di elementi, che sono in questo modo:

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>

Espandi frammento

Qualcuno sa come selezionare CSS tranne l'ultimo elemento?

Puoi vedere la definizione del :not()selettore qui

css css-selectors pseudo-element

— Matt Clarkson
fonte

1

Questo comportamento sembra essere un bug in Chrome 10. Funziona per me in Firefox 3.5.

— duri

6

In realtà ha appena eseguito lo snippet nel 2018 con l'ultimo Chrome e ha funzionato come previsto.

— atoth

433

Se si tratta di un problema con il non selettore, è possibile impostarli tutti e sovrascrivere l'ultimo

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

o se puoi usarlo prima, non c'è bisogno dell'ultimo figlio

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

— imma
fonte

12

Questo è in realtà l'unico modo per farlo funzionare fino a IE8 (scusate, niente cheetos per IE7 e precedenti). li:not(:first-child):beforeè un po 'troppo spaventoso per essere affrontato dalle versioni precedenti di Internet Explorer.

— Sandy Gifford,

240

Ogni cosa sembra corretta. Potresti voler usare il seguente selettore css invece di quello che hai usato.

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

— Vivek
fonte

4

@ScottBeeson Questo è il miglior tendalino per browser moderni, ma la risposta accettata funziona con i vecchi browser. (Sono d'accordo con te, questo dovrebbe essere quello accettato)

— Arthur

25

Il tuo esempio come scritto funziona perfettamente in Chrome 11 per me. Forse il tuo browser non supporta il :not()selettore?

Potrebbe essere necessario utilizzare JavaScript o simili per eseguire questo browser incrociato. jQuery implementa : not () nella sua API di selezione.

— Liza Daly
fonte

8

Ho risolto questo facendo li:not(:first-child):beforee aggiungendo la barra verticale prima. Stavo lavorando con la versione stabile di Chrome che non sembra supportare l'ultimo figlio. La costruzione delle Canarie lo fa. Grazie per la risposta.

— Matt Clarkson,

Sembra che Chrome non lo supporti nemmeno nel 2013?

— MikkoP,

20

Un esempio usando CSS

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

— Lorena Pita
fonte

20

Per me funziona benissimo

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

— Ashad Nasim
fonte

1

Questa risposta potrebbe riguardare SCSS piuttosto che CSS.

— Chris Walsh,

10

Il mio esempio non funziona in IE per me, devi specificare l'intestazione Doctype nel tuo documento per rendere la tua pagina in modo standard in IE per usare la proprietà CSS del contenuto:

<!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>

Il secondo modo è usare i selettori CSS 3

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

Ma devi ancora specificare Doctype

E il terzo modo è usare JQuery con alcuni script come il seguente:

<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>

Il vantaggio del terzo modo è che non è necessario specificare doctype e jQuery si occuperà della compatibilità.

— Martin Kunc
fonte

6

<! DOCTYPE html> è il nuovo standard HTML5.

— Matt Clarkson,

1

Questo è un modo fantastico e moderno per affrontarlo. Stavo lottando con: ultimo figlio, poi ho trovato la tua risposta. Questo è perfetto! : no (: ultimo tipo): dopo

— Firze,

1

Rimuovere: before last-child e: after e used

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

Speriamo che dovrebbe funzionare

— Jaylukmann
fonte

-2

Puoi provare questo, so che non sono le risposte che stai cercando, ma il concetto è lo stesso.

Dove stai impostando gli stili per tutti i bambini e poi rimuovendolo dall'ultimo figlio.

Snippet di codice

li
  margin-right: 10px

  &:last-child
    margin-right: 0

Immagine

— Yashu Mittal
fonte

2

Ciao, posso sapere cos'è questo editore per favore? Sembra carino.

— Zanecat,

È un piccolo codice e chiunque può facilmente memorizzarlo e digitarlo.

— Yashu Mittal,