Verwenden des Last-Child-Selektors

106

Mein Ziel ist es, das CSS auf das letzte anzuwenden li, aber das tut es nicht.

#refundReasonMenu #nav li:last-child {
    border-bottom: 1px solid #b5b5b5;
}
<div id="refundReasonMenu">
    	<ul id="nav">
    		<li><a id="abc" href="#">abcde</a></li>
    		<li><a id="def" href="#">xyz</a></li>
    	</ul>
    </div>
Erweitern Sie das Snippet

Wie kann ich nur das letzte Kind auswählen ?

css css-selectors Miral
quelle

Antworten:

171

Die :last-childPseudoklasse kann immer noch nicht zuverlässig in allen Browsern verwendet werden. Insbesondere Internet Explorer - Versionen <9 und Safari <3.2 auf jeden Fall unterstützen es nicht , obwohl Internet Explorer 7 und Safari 3.2 tun Unterstützung :first-childneugierig.

Am besten fügen Sie last-childdiesem Element explizit eine (oder eine ähnliche) Klasse hinzu und wenden sie li.last-childstattdessen an.

VoteyDisciple
quelle
46
IE8 unterstützt auch nicht :last-child. Und es ist nicht so neugierig. :first-childist eine CSS2-Pseudoklasse, :last-childeine CSS3-Pseudoklasse.
Mercator
92
last-child funktioniert in allen modernen Browsern, was natürlich bedeutet, dass es in keiner IE-Version funktioniert.
Rob
25
Zu Ihrer Information, IE 9 unterstützt:last-child .
Jari Keinänen
6
@mercator Es ist merkwürdig, dass: das erste Kind in CSS2 implementiert wurde, aber das letzte Kind bis CSS3 übrig blieb ... es scheint ziemlich offensichtlich, sie gleichzeitig hinzuzufügen.
Cobby
21
IE7 weigert sich, andere Bastardkinder zu erkennen
Dewayne
76

Eine andere Lösung, die für Sie funktionieren könnte, besteht darin, die Beziehung umzukehren. Sie würden also den Rahmen für alle Listenelemente festlegen. Sie würden dann das erste Kind verwenden, um den Rand für das erste Element zu entfernen. Das erste Kind wird in allen Browsern statisch unterstützt (dh es kann nicht dynamisch über anderen Code hinzugefügt werden, das erste Kind ist jedoch ein CSS2-Selektor, während das letzte Kind in der CSS3-Spezifikation hinzugefügt wurde).

Hinweis: Dies funktioniert nur so, wie Sie es beabsichtigt haben, wenn Sie nur 2 Elemente in der Liste haben, wie in Ihrem Beispiel. Auf alle dritten Elemente und höher werden Rahmen angewendet.

Branden Silva
quelle
2
+1 für Out-of-the-Box-Denken :-) Ich habe gerade meine Elemente für das letzte Kind in das Element für das erste Kind konvertiert und für Menütrennzeichen von rechts nach links geändert. Jetzt mag IE8 mein CSS.
Scott B
43

Wenn Sie der Meinung sind, dass Sie Javascript verwenden können, können Sie seit der Unterstützung von last-childjQuery die CSS-Methode von jQuery verwenden, und das Gute daran ist, dass fast alle Browser unterstützt werden

Beispielcode:

$(function(){
   $("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})

Weitere Informationen finden Sie hier: http://api.jquery.com/css/#css2

Tarik
quelle
8
Sprechen Sie über schmutzig.
md1337
95
Wayyy ist besser, wenn Sie so etwas tun, $("#nav li:last-child").addClass('last-child')damit Sie Ihr Styling in Ihren Stylesheets behalten können.
Jason
Dies ist sauberer als die erste Lösung, da sie automatisch gehandhabt wird. Aber ich stimme auch Jason zu.
Josh M.
1
Tatsächlich lädt IE7 keine Klasse, die sowohl div:last-childals als auch enthält div.last-child. Es scheint, dass die :last-childSyntax ungültig ist und keine Klasse mit diesem Pseudo-Selektor angewendet wird.
Josh M.
@ Josh M.: Das ist korrektes und erwartetes Verhalten. Sehr unglücklich, sollte ich sagen. Sie müssten die Regel duplizieren.
BoltClock
19

Wenn die Anzahl der Listenelemente festgelegt ist, können Sie den nebenstehenden Selektor verwenden. Wenn Sie beispielsweise nur drei <li>Elemente haben, können Sie das letzte auswählen <li>mit:

#nav li+li+li {
    border-bottom: 1px solid #b5b5b5;
}
ccpizza
quelle
3
Ihr Selektor ist falsch. li + #nav liwählt liinnen aus #nav, was danach kommt li. Ihr Selektor sollte einfach sein #nav li + li + li.
BoltClock
1
Das ist geschickt. Funktioniert gut in IE8, jedoch nicht in IE7.
Mateng
13

Wenn Sie häufig CSS3-Selektoren benötigen, können Sie jederzeit die selectivizr-Bibliothek auf Ihrer Site verwenden:

http://selectivizr.com/

Es ist ein JS-Skript, das Browsern, die sie sonst nicht unterstützen würden, Unterstützung für fast alle CSS3-Selektoren hinzufügt.

Werfen Sie es <head>mit einer IE-Bedingung in Ihr Tag:

<!--[if (gte IE 6)&(lte IE 8)]>
  <script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->
nzifnab
quelle
0

Alternativ zur Verwendung einer Klasse können Sie eine detaillierte Liste verwenden, in der die untergeordneten dt-Elemente einen Stil und die untergeordneten dd-Elemente einen anderen Stil haben. Ihr Beispiel würde werden:

#refundReasonMenu #nav li:dd
{
  border-bottom: 1px solid #b5b5b5;
}

html:

<div id="refundReasonMenu">
  <dl id="nav">
        <dt><a id="abc" href="#">abcde</a></dt>
        <dd><a id="def" href="#">xyz</a></dd>
  </dl>
</div>

Keine Methode ist besser als die andere und es liegt nur an den persönlichen Vorlieben.

Lexx
quelle
0

Eine andere Möglichkeit besteht darin, den Selektor für das letzte Kind in jQuery zu verwenden und dann die Methode .css () zu verwenden. Seien Sie jedoch müde, da einige Leute noch in der Steinzeit sind und Browser mit deaktiviertem JavaScript verwenden.

ecollis6
quelle
0

Warum nicht den Rand am unteren Rand des UL anbringen?

#refundReasonMenu #nav ul
{
    border-bottom: 1px solid #b5b5b5;
}
Schweinekotelett
quelle
1
Wenn Sie padding-bottomauf dem <ul>Element oder margin-bottomauf dem letzten <li>Element haben, hat dies nicht die gewünschte Platzierung direkt unter dem letzten <li>Element. Ansonsten ist dies eine gute Lösung.
Wex
0

Wenn Sie die Elemente schweben lassen, können Sie die Reihenfolge umkehren

dh float: right;stattfloat: left;

Verwenden Sie dann diese Methode, um das erste untergeordnete Element einer Klasse auszuwählen.

/* 1: Apply style to ALL instances */
#header .some-class {
  padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
  padding-right: 20px;
}

Dies wendet die Klasse tatsächlich nur auf die LAST-Instanz an, da sie jetzt in umgekehrter Reihenfolge vorliegt.

Hier ist ein Arbeitsbeispiel für Sie:

<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
  border: 1px solid red;
  padding-right: 0;
}
#header .some-class~.some-class {
  border: 0;
  padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
  <img src="some_image" title="Logo" class="lfloat no-border"/>
  <ul class="some-class rfloat">
    <li>List 1-1</li>
    <li>List 1-2</li>
    <li>List 1-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 2-1</li>
    <li>List 2-2</li>
    <li>List 2-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 3-1</li>
    <li>List 3-2</li>
    <li>List 3-3</li>
  </ul>
  <img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>
Ozzy
quelle
-2

Es ist schwer zu sagen, ohne den Rest Ihres CSS zu sehen, aber versuchen Sie, es !importantvor der Rahmenfarbe hinzuzufügen , damit es so aussieht:

#refundReasonMenu #nav li:last-child
{
  border-bottom: 1px solid #b5b5b5 !important;
}
Änderungsprotokoll
quelle