<div class="commentList">
<article class="comment " id="com21"></article>
<article class="comment " id="com20"></article>
<article class="comment " id="com19"></article>
<div class="something"> hello </div>
</div>
Ich möchte #com19
auswählen?
.comment {
width:470px;
border-bottom:1px dotted #f0f0f0;
margin-bottom:10px;
}
.comment:last-child {
border-bottom:none;
margin-bottom:0;
}
Das funktioniert nicht, solange ich einen anderen div.something
als letztes Kind in der commentList habe. Ist es möglich, mit dem Last-Child-Selector das letzte Erscheinungsbild von article.comment
auszuwählen?
:last-child
funktioniert nur, wenn das betreffende Element das letzte untergeordnete Element des Containers ist und nicht das letzte Element eines bestimmten Elementtyps. Dafür wollen Sie :last-of-type
Gemäß dem Kommentar von @ BoltClock wird nur das letzte article
-Element geprüft, nicht das letzte Element mit der Klasse von .comment
.
html
<div class="commentList">
<article class="comment " id="com21"></article>
<article class="comment " id="com20"></article>
<article class="comment " id="com19"></article>
<div class="something"> hello </div>
</div>
css
body {
background: black;
}
.comment {
width:470px;
border-bottom:1px dotted #f0f0f0;
margin-bottom:10px;
}
.comment:last-of-type {
border-bottom:none;
margin-bottom:0;
}
Wenn Sie die Elemente verschieben, können Sie die Reihenfolge umkehren
d. h. float: right;
anstelle von float: left;
Und dann verwenden Sie diese Methode, um das erste Kind 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;
}
Dadurch wird die Klasse tatsächlich nur auf die LAST-Instanz angewendet, weil sie jetzt in umgekehrter Reihenfolge ist.
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>
Ich denke, dass die richtigste Antwort lautet: Verwenden Sie :nth-child
(oder in diesem speziellen Fall das Gegenstück :nth-last-child
). Die meisten kennen diesen Selektor nur durch sein erstes Argument, um einen Bereich von Elementen basierend auf einer Berechnung mit n zu ergreifen, er kann jedoch auch ein zweites Argument "eines [beliebigen CSS-Selektors]" verwenden.
Ihr Szenario könnte mit diesem Selektor gelöst werden: .commentList .comment:nth-last-child(1 of .comment)
Technisch korrekt zu sein bedeutet jedoch nicht, dass Sie es verwenden können, da dieser Selektor ab sofort nur in Safari implementiert ist.
Zur weiteren Lektüre:
Was ich denke, sollte hier kommentiert werden, was für mich funktioniert hat:
Verwenden Sie :last-child
mehrmals an den benötigten Stellen, damit immer der letzte der letzten angezeigt wird.
Nehmen Sie dies zum Beispiel:
.page.one .page-container .comment:last-child {
color: red;
}
.page.two .page-container:last-child .comment:last-child {
color: blue;
}
<p> When you use .comment:last-child </p>
<p> you only get the last comment in both parents </p>
<div class="page one">
<div class="page-container">
<p class="comment"> Something </p>
<p class="comment"> Something </p>
</div>
<div class="page-container">
<p class="comment"> Something </p>
<p class="comment"> Something </p>
</div>
</div>
<p> When you use .page-container:last-child .comment:last-child </p>
<p> you get the last page-container's, last comment </p>
<div class="page two">
<div class="page-container">
<p class="comment"> Something </p>
<p class="comment"> Something </p>
</div>
<div class="page-container">
<p class="comment"> Something </p>
<p class="comment"> Something </p>
</div>
</div>
Was ist mit dieser Lösung?
div.commentList > article.comment:not(:last-child):last-of-type
{
color:red; /*or whatever...*/
}