Comment sélectionner le "dernier enfant" avec un nom de classe spécifique en CSS ?

Question

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list">test3</li>
    <li>test4</li>
</ul>

Comment puis-je sélectionner le "dernier enfant" avec le nom de la classe : liste ?

<style>
    ul li.list:last-child{background-color:#000;}
</style>

Je sais que l'exemple ci-dessus ne fonctionne pas, mais y a-t-il quelque chose de similaire qui fonctionne ?

IMPORTANT :

a) Je ne peux pas utiliser ul li:nth-child(3) parce qu'il pourrait arriver qu'il se trouve aussi à la quatrième ou cinquième place.

b) Pas de JavaScript.

Answer 1

Cela peut être fait en utilisant un sélecteur d'attributs.

[class~='list']:last-of-type  {
    background: #000;
}

Le site class~ sélectionne un mot entier spécifique. Cela permet à votre élément de liste d'avoir plusieurs classes si nécessaire, dans un ordre différent. Il trouvera toujours la classe exacte "liste" et appliquera le style à la dernière.

Voir un exemple fonctionnel ici : http://codepen.io/chasebank/pen/ZYyeab

En savoir plus sur les sélecteurs d'attributs :

http://css-tricks.com/attribute-selectors/ http://www.w3schools.com/css/css_attribute_selectors.asp

Answer 2

Vous pouvez utiliser le sélecteur de frère et sœur adjacent pour obtenir quelque chose de similaire, cela pourrait vous aider.

.list-item.other-class + .list-item:not(.other-class)

ciblera effectivement l'élément suivant immédiatement après le dernier élément avec la classe other-class .

Plus d'informations ici : https://css-tricks.com/almanac/selectors/a/adjacent-sibling/

Answer 3

Il s'agit d'une réponse insolente, mais si vous ne pouvez utiliser que des CSS et que vous êtes en mesure d'inverser vos éléments dans le DOM, cela peut valoir la peine de l'envisager. Elle repose sur le fait que, bien qu'il n'existe pas de sélecteur pour l'élément dernier d'une classe spécifique, il est en fait possible de donner un style à l'élément premièrement . L'astuce consiste à utiliser ensuite la méthode flexbox pour afficher les éléments dans l'ordre inverse.

ul {
  display: flex;
  flex-direction: column-reverse;
}

/* Apply desired style to all matching elements. */
ul > li.list {
  background-color: #888;
}

/* Using a more specific selector, "unstyle" elements which are not the first. */
ul > li.list ~ li.list {
  background-color: inherit;
}

<ul>
  <li class="list">0</li>
  <li>1</li>
  <li class="list">2</li>
</ul>
<ul>
  <li>0</li>
  <li class="list">1</li>
  <li class="list">2</li>
  <li>3</li>
</ul>

Answer 4

Vous ne pouvez pas cibler la dernière instance du nom de la classe dans votre liste sans JS.

Cependant, il se peut que vous ne soyez pas complètement à court de chance, selon ce que vous voulez réaliser. Par exemple, en utilisant le sélecteur next sibling, j'ai ajouté un séparateur visuel après le dernier de vos fichiers .list éléments ici : http://jsbin.com/vejixisudo/edit?html,css,output

Answer 5

Vous pourriez aussi utiliser :

ul .list:last-child { some: css }

Cela signifie que vous n'avez pas besoin d'ajouter des classes supplémentaires.

Vérifiez-le - http://jsfiddle.net/eW6S5/