Sélecteur CSS dernier-enfant: sélectionnez le dernier élément d'une classe spécifique, pas le dernier enfant à l'intérieur du parent?

176

<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'en ai un autre div.somethingcomme dernier enfant dans la commentList. Est-il possible d'utiliser le sélecteur du dernier enfant dans ce cas pour sélectionner la dernière apparition de article.comment?

jsFiddle

html css css-selectors

— mat
source

229

:last-childne fonctionne que lorsque l'élément en question est le dernier enfant du conteneur, pas le dernier d'un type d'élément spécifique. Pour ça, tu veux:last-of-type

http://jsfiddle.net/C23g6/3/

Selon le commentaire de @ BoltClock, cela ne vérifie que le dernier articleélément, pas le dernier élément avec la classe de .comment.

body {
  background: black;
}

.comment {
  width: 470px;
  border-bottom: 1px dotted #f0f0f0;
  margin-bottom: 10px;
}

.comment:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

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

Développer l'extrait

— Chris
source

146

Cependant, il ne regarde pas la classe, seulement le type, donc si vous avez des non-articles avec la même classe, vous obtiendrez des résultats inattendus.

— BoltClock

1

Cela fonctionne correctement. Cependant, si nous en avons besoin pour affiner les éléments par classe, cela ne fonctionne plus. jsfiddle.net/aliemreeee/a4H7f/2

— Ali Emre Çakmakoğlu

12

sur la base de ces réponses, je suppose qu'il n'y a aucun moyen de sélectionner last-of-class.

— toobulkeh

14

pas avant que les sélecteurs CSS de niveau 4 ne soient acceptés et mis en œuvre par les navigateurs, où vous aurez accès à :nth-match(selector)et :nth-last-match(selector). Voir w3.org/TR/selectors4 pour plus de détails.

— Chris

1

Ou plutôt, :nth-last-child(An+B of selector)comme cela a :nth-last-match()été abandonné bien avant cela, mais ils n'ont pas pris la peine de mettre à jour le WD. Voir stackoverflow.com/questions/21167159/css-nth-match-doesnt-work

— ...

6

Si vous faites flotter les éléments, vous pouvez inverser l'ordre

c'est float: right;à dire au lieu defloat: left;

Et puis utilisez 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;
}

Cela applique en fait la classe à la LAST instance uniquement parce qu'elle est maintenant dans l'ordre inverse.

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>

— Ozzy
source

Notez que cela ne fonctionnera pas si les éléments flottants sont poussés sur la ligne suivante (c'est-à-dire pas assez d'espace horizontal pour flotter à droite / à gauche)

— Ozzy

.some-class~.some-classfonctionne très bien pour moi lorsque seulement 2 éléments sont répétés.

— Meloman

4

Je suppose que la réponse la plus correcte est: utiliser :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 [n'importe quel 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 pouvez l'utiliser, car ce sélecteur n'est actuellement implémenté que dans Safari.

Pour en savoir plus:

— hurrtz
source

1

Quelque chose que je pense devrait être commenté ici qui a fonctionné pour moi:

Utilisation :last-child plusieurs fois aux endroits nécessaires pour qu'il obtienne 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>

Développer l'extrait

— Un ami
source

0

Et cette solution?

div.commentList > article.comment:not(:last-child):last-of-type
{
    color:red; /*or whatever...*/
}

— lsblsb
source

@lsblsb, Vous utilisez articleici, donc: not (: last-child) n'est pas nécessaire pour l'exemple donné.

— Евгений Масленков

que se passe-t-il si l'élément avec la classe somethingn'existe pas dans le HTML d'origine et est inséré dynamiquement hover? Cette solution n'échouera-t-elle pas?

— Fr0zenFyr

-1

si le dernier type d'élément est également article, last-of-typene fonctionnera pas comme prévu.

peut-être que je ne comprends pas vraiment comment ça marche.

démo

— Allen
source