Comment puis-je sélectionner le “dernier enfant” avec un nom de classe dans le CSS?

<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 est-il quelque chose de semblable à ce qui ne fonctionne pas?

IMPORTANT:

a) je ne peux pas utiliser ul li:nth-child(3), car il pourrait arriver que c'est sur la quatrième ou cinquième place.

b) Pas de JavaScript.

Toute aide serait appréciée, merci!

lui donner un nom de classe qui sera le plus simple navigateur croix de chemin
Veuillez passer en revue les réponses et mettre à jour les données vérifiées réponse.

InformationsquelleAutor | 2011-06-19

4

Je vous suggère de profiter du fait que vous pouvez attribuer plusieurs classes à un élément comme suit:
```
<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list last">test3</li>
    <li>test4</li>
</ul>
```
Le dernier élément a de la list classe comme ses frères et sœurs, mais aussi a la last de classe que vous pouvez utiliser afin de définir la propriété CSS que vous voulez, comme suit:
```
ul li.list {
    color: #FF0000;
}

ul li.list.last {
    background-color: #000;
}
```
- Je suppose que je n'ai pas d'autre choix que de faire de cette façon. Merci 😉
- Cela ne marche pas à tous répondre à la question, avez-vous même de le lire? Il demande comment le faire sans avoir à ajouter une autre classe pour le dernier élément, c'est la toute la beauté de l' :dernier-sélecteur d'enfant. Ce ne devrait pas être accepté de répondre.
- veuillez prendre le temps de le lire au lieu de faire de telles déclarations. Pendant que vous êtes à lui proposer une meilleure solution.
- Je pense qu'il serait préférable de mettre la "dernière" de la classe sur le 3ème élément li (c'est à dire l'élément avec le texte "test3" plutôt que sur "test4" juste pour éviter une certaine confusion - quand j'ai d'abord essayé votre code dans jsfiddle, l est dit: "comment est-ce faire ce que l'OP a demandé" jusqu'à ce que j'ai compris ce que tu voulais dire avec la "dernière" de la classe.
- Cette réponse totalement ne pas répondre à la question, comme mentionné par @nuits
- en fait, il ne.
- En fonction de votre balisage HTML, cela peut être la seule option qui fonctionne. Le :last-child sélecteur ne fonctionne pas sur les noms de classe si le dernier élément n'a pas le nom de la classe. Voir jsfiddle.net/qgqf7gpq/2
InformationsquelleAutor Ibu
56

Cela peut être fait à l'aide d'un sélecteur d'attribut.
```
[class~='list']:last-of-type  {
    background: #000;
}
```
La class~ sélectionne un ensemble spécifique de mots. Cela permet à votre élément de la liste à plusieurs classes si besoin, dans diverses d'ordre. Ça va encore trouver l'exacte catégorie "liste" et appliquer le style à la dernière.

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

Lire la suite sur le sélecteur d'attribut:

http://css-tricks.com/attribute-selectors/
http://www.w3schools.com/css/css_attribute_selectors.asp
- Malheureusement, j'ai trouvé cette technique ne fonctionne pas... Ce qu'il est vraiment en train de faire est de trouver les éléments qui correspondent à la classe, en voyant ce qu'ils sont, qui serait dans ce cas un élément de la liste, puis en sélectionnant le " last-of-type, indépendamment de si oui ou non que particulier on a une classe de list. Je vais laisser la réponse bien que, dans le cas où il étincelles certaines autres solutions comme l'attribut et de la pseudo-sélecteurs sont tout à fait intéressant et puissant.
- Ce n'est pas de sélectionner la dernière div avec la classe "liste" en utilisant le code html dans la question
- Qu'est-ce que le point de le faire [class~='list'] au lieu de simplement .list?
- Il n'y aurait aucun point, si vous essayez seulement de cible de la classe. Cependant, le but ici était de cibler la dernière itération d'une classe, et si vous essayez d'utiliser la :last-of-type pseudo-sélecteur (ie: .list:last-of-type), vous vous retrouverez avec des problèmes de navigateur. Pseudo-sélecteurs cible éléments, attributs et parfois ne fonctionnent pas sur les classes, comme le vsync mentionne dans la réponse précédente. Mais si vous utilisez un sélecteur d'attribut de la cible de la classe au lieu de simplement la classe, :last-of-type travaille beaucoup plus fiable.
- Ne fonctionne pas. Mais j'ai trouvé une autre approche qui fonctionne pour mon cas. .Select-value:nth-last-child(2)(ou même .Select-value:not(:nth-last-child(2)) pour désactiver les styles pour cet élément). Dans mon cas, je ne peux pas modifier le html parce que c'est l'héritage(de la bibliothèque). Mais je sais que mon élément 2 de la fin.
InformationsquelleAutor Chase
21

Vous pouvez utiliser le adjacents sélecteur de frères de réaliser quelque chose de similaire, qui pourrait vous aider.
```
.list-item.other-class + .list-item:not(.other-class)
```
Permettra de cibler efficacement les immédiatement à l'élément suivant après le dernier élément avec la classe other-class.

Lire la suite ici: https://css-tricks.com/almanac/selectors/a/adjacent-sibling/
- Cela fonctionne bien pour moi, mais n'a pas pour effet de sélectionner le dernier enfant de la classe list que l'OP mentionné. Cela dit, il peut être utilisé pour obtenir des résultats similaires en fonction des besoins.
InformationsquelleAutor Kenneth Lynne

C'est un coup de répondre, mais si vous êtes contraint de CSS et capable de se retourner vos articles dans les DOM, il pourrait être utile d'examiner. Il s'appuie sur le fait que bien qu'il n'y a pas de sélecteur pour le dernier élément d'une classe spécifique, il est possible de le style de la première. L'astuce consiste alors à utiliser flexbox pour afficher les éléments dans l'ordre inverse.

CSS:

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

HTML:

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

C'est en fait le seul hack qui résout le problème pour de vrai

InformationsquelleAutor joki

6

Je suppose que le plus de la réponse correcte est: Utiliser :nth-child (ou, dans ce cas précis, son homologue :nth-last-child). La plupart ne savent ce sélecteur en son premier argument pour saisir une gamme d'articles basés sur un calcul avec n, mais il peut également prendre une deuxième argument "de [toute sélecteur CSS]".

Votre scénario pourrait être résolu avec ce sélecteur: li:nth-last-child(1 of .list)

Mais techniquement correct ne signifie pas que vous pouvez utiliser, cependant, parce que ce sélecteur est seulement mis en œuvre dans Safari.

Pour davantage de lecture:
- https://drafts.csswg.org/selectors-4/#the-nth-child-pseudo
- http://caniuse.com/#search=nth-child
- c'est une honte. est-il toujours pas mis en œuvre?
- encore que Safari, oui. Mais au moins, vous pouvez cibler à la fois les Safari et Safari iOS avec cette
- l'homme ce serait donc utile. j'espère que c'gains large soutien bientôt
InformationsquelleAutor hurrtz
2

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

Cependant, vous ne pouvez pas être hors-de-css-la chance, en fonction de ce que vous êtes désireux de le réaliser. Par exemple, en utilisant la prochaine sélecteur de frères, j'ai ajouté un visuel diviseur après le dernier de vos .list éléments ici: http://jsbin.com/vejixisudo/edit?html,css,sortie

InformationsquelleAutor Reggie Pinkham
0

Il y a une solution (dans certaines situations) pour ce problème:

Alors que ce n'est pas répondre directement à la question, il y a une forte
la probabilité que cette façon de penser d'atteindre le même objectif:

Permet de dire que nous sommes allés à masquer tous les éléments de la liste qui est inférieur à l'indice de 3
```
<ul>
    <li>test1</li>
    <li>test2</li>
    <li class="hide">test3</li>
    <li>test4</li>
    <li>test5</li>
</ul>
```
CSS
```
li{ display:none; }
li.hide ~ li{ display:block; }
```
Démonstration En Direct

Ce va se débarrasser de la nécessité d'ajouter un hide classe à tous les éléments qui doit être caché, de sorte que nous nous retrouvons avec une seule classe, hide, dont les règles de tous les. maintenant, vous n'avez pas besoin d'utiliser le last-of-type qui ne peuvent pas travailler avec des noms de Classe. vous devez repenser votre approche de la classification des choses

InformationsquelleAutor vsync
0

Utilisez ce sélecteur: ul > li:last-of-type . Cela permet de sélectionner chaque élément de la liste (<li>) dans une liste non ordonnée (<ul>).

Répartition de la réponse: je suis en sélectionnant uniquement les enfants (>) d'une liste non ordonnée (<ul>) qui est le dernier enfant de son type (<li>) de l'élément parent (<ul>).

Vous pouvez utiliser un Id ou une classe pour limiter le sélecteur de certaines listes non ordonnées. Par exemple: ul.my-class > li:last-of-type permettra de choisir la dernière <li> seulement à partir de la listes non ordonnées de cette classe

InformationsquelleAutor flen

-5

$('.class')[$(this).length - 1]

$( "p" ).last().addClass( "selected" );

Demandé pour une css solution

InformationsquelleAutor J ZHOU

Vous devez vous connecter pour publier un commentaire.

Il y a une solution (dans certaines situations) pour ce problème:

CSS

Démonstration En Direct