CSS: nicht (: letztes Kind): nach Selektor

369

Ich habe eine Liste von Elementen, die so gestaltet sind:

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>

Erweitern Sie das Snippet

Weiß jemand, wie man CSS alle außer dem letzten Element auswählt?

Die Definition des :not()Selektors sehen Sie hier

css css-selectors pseudo-element

— Matt Clarkson
quelle

1

Dieses Verhalten scheint in Chrome 10 ein Fehler zu sein. Es funktioniert für mich in Firefox 3.5.

— Duri

6

Eigentlich lief gerade das Snippet im Jahr 2018 mit dem neuesten Chrome und funktionierte wie erwartet.

— Uhr

433

Wenn es ein Problem mit dem Nicht-Selektor gibt, können Sie alle einstellen und den letzten überschreiben

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

oder wenn Sie vorher verwenden können, brauchen Sie kein letztes Kind

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

— imma
quelle

12

Dies ist eigentlich die einzige Möglichkeit, es bereits in IE8 zum Laufen zu bringen (sorry, keine Cheetos für IE7 und früher). li:not(:first-child):beforeist ein bisschen zu beängstigend für die älteren Versionen von Internet Explorer.

— Sandy Gifford

240

Alles scheint richtig zu sein. Möglicherweise möchten Sie den folgenden CSS-Selektor anstelle des von Ihnen verwendeten verwenden.

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

— Vivek
quelle

4

@ScottBeeson Dies ist der beste Awnser für moderne Browser, aber akzeptierte Antwortarbeiten mit alten Browsern. (Ich stimme Ihnen zu, dies sollte die akzeptierte sein)

— Arthur

25

Ihr Beispiel wie geschrieben funktioniert in Chrome 11 perfekt für mich. Vielleicht unterstützt Ihr Browser den :not()Selektor einfach nicht ?

Möglicherweise müssen Sie JavaScript oder ähnliches verwenden, um diesen browserübergreifenden Vorgang auszuführen. jQuery implementiert : not () in seiner Selektor-API.

— Liza Daly
quelle

8

Ich habe dies gelöst, indem ich zuvor li:not(:first-child):beforeden vertikalen Balken hinzugefügt habe. Ich habe mit der stabilen Version von Chrome gearbeitet, die das letzte Kind nicht zu unterstützen scheint. Der kanarische Bau tut es. Danke für die Antwort tho.

— Matt Clarkson

Scheint, als würde Chrome es auch 2013 nicht unterstützen?

— MikkoP

20

Ein Beispiel mit CSS

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

— Lorena Pita
quelle

20

Für mich funktioniert es gut

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

— Ashad Nasim
quelle

1

Diese Antwort bezieht sich möglicherweise eher auf SCSS als auf CSS.

— Chris Walsh

10

Ihr Beispiel funktioniert in IE nicht für mich. Sie müssen in Ihrem Dokument den Doctype-Header angeben , um Ihre Seite im IE auf standardmäßige Weise zu rendern und die CSS-Eigenschaft content zu verwenden:

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

Der zweite Weg ist die Verwendung von CSS 3-Selektoren

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

Sie müssen jedoch weiterhin Doctype angeben

Und die dritte Möglichkeit besteht darin, JQuery mit einem Skript wie dem folgenden zu verwenden:

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

Der dritte Weg hat den Vorteil, dass Sie keinen Doctype angeben müssen und jQuery für die Kompatibilität sorgt.

— Martin Kunc
quelle

6

<! DOCTYPE html> ist der neue HTML5-Standard.

— Matt Clarkson

1

Dies ist eine großartige und moderne Art, damit umzugehen. Ich hatte Probleme mit: Letztes Kind, dann habe ich deine Antwort gefunden. Dieser ist perfekt! : nicht (: letzter Typ): nach

— Firze

1

Entfernen Sie das: vor dem letzten Kind und das: nach und verwendet

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

Hoffentlich sollte es funktionieren

— Jaylukmann
quelle

-2

Sie können dies versuchen, ich weiß, es sind nicht die Antworten, die Sie suchen, aber das Konzept ist das gleiche.

Hier legen Sie die Stile für alle untergeordneten Elemente fest und entfernen sie dann aus dem letzten untergeordneten Element.

Code-Auszug

li
  margin-right: 10px

  &:last-child
    margin-right: 0

Bild

— Yashu Mittal
quelle

2

Hallo, darf ich bitte wissen, was dieser Editor ist? Es sieht gut aus.

— Zanecat

Es ist ein kleines Stück Code und jeder kann es sich leicht merken und eingeben.

— Yashu Mittal