web-dev-qa-db-fra.com

Sélecteur CSS dernier enfant: sélectionnez le dernier élément d'une classe spécifique et non le dernier enfant dans le parent?

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

jsFiddle

htmlcsscss3css-selectors
136
matt

: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

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

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;
}
196
Chris

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

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:

3
hurrtz

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>

1
A Friend

Qu'en est-il de cette solution?

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