<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>
Je veux sélectionner #com19
?
.comment {
width:470px;
border-bottom:1px dotted #f0f0f0;
margin-bottom:10px;
}
.comment:last-child {
border-bottom:none;
margin-bottom:0;
}
Cela ne fonctionne pas tant que j'ai un autre div.something
comme dernier enfant de la liste de commentaires. Est-il possible d'utiliser le sélecteur last-child dans ce cas pour sélectionner la dernière apparence de article.comment
?
:last-child
ne fonctionne que lorsque l'élément en question est le dernier enfant du conteneur, et non le dernier d'un type d'élément spécifique. Pour cela, vous voulez :last-of-type
Selon le commentaire de @ BoltClock, il ne s'agit que de vérifier le dernier élément article
, et non le dernier élément de la classe .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;
}
Si vous faites flotter les éléments, vous pouvez inverser l'ordre
c'est-à-dire float: right;
au lieu de float: left;
Et utilisez ensuite cette méthode pour sélectionner le premier enfant d'une classe.
/* 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;
}
En réalité, cela applique la classe à la dernière instance uniquement parce qu'elle est maintenant inversée.
Voici un exemple de travail pour vous:
<!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>
Je suppose que la réponse la plus correcte est: Utilisez :nth-child
(ou, dans ce cas précis, son homologue :nth-last-child
). La plupart ne connaissent ce sélecteur que par son premier argument pour saisir une plage d'éléments basée sur un calcul avec n, mais il peut également prendre un deuxième argument "de [tout sélecteur CSS]".
Votre scénario pourrait être résolu avec ce sélecteur: .commentList .comment:nth-last-child(1 of .comment)
Mais être techniquement correct ne signifie pas que vous puissiez l’utiliser, car ce sélecteur est à présent uniquement implémenté dans Safari.
Pour en savoir plus:
Quelque chose que je pense devrait être commenté ici qui a fonctionné pour moi:
Utilisez :last-child
plusieurs fois aux endroits nécessaires pour obtenir toujours le dernier des derniers.
Prenons ceci par exemple:
.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>
Qu'en est-il de cette solution?
div.commentList > article.comment:not(:last-child):last-of-type
{
color:red; /*or whatever...*/
}