web-dev-qa-db-fra.com

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

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

Comment sélectionner le "dernier enfant" avec le nom de la classe: list?

<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 à cela qui fonctionne?

IMPORTANT:

a) Je ne peux pas utiliser ul li:nth-child(3), car il se peut que ce soit également à la quatrième ou à la cinquième place.

b) Pas de JavaScript.

Toute aide serait appréciée Merci!

csscss3css-selectors
93
user317005

Je vous suggère de tirer parti du fait que vous pouvez affecter plusieurs classes à un élément, comme ceci:

<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 la classe list comme ses frères mais aussi la classe last que vous pouvez utiliser pour définir la propriété CSS de votre choix, comme ceci:

ul li.list {
    color: #FF0000;
}

ul li.list.last {
    background-color: #000;
}
3
Ibu

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

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

Le 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 "liste" de classe exacte et appliquera le style à la dernière.

Voir un exemple de travail 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

57
Chase

Vous pouvez utiliser le sélecteur de fratrie adjacent pour obtenir quelque chose de similaire, qui pourrait vous aider.

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

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

Lisez plus ici: https://css-tricks.com/almanac/selectors/a/adjacent-sibling/

21
Kenneth Lynne

C'est une réponse insolente, mais si vous êtes limité à CSS et capable d'inverser vos éléments dans le DOM, cela peut valoir la peine d'être envisagé. Il repose sur le fait que, bien qu’il n’existe aucun sélecteur pour l’élément last d’une classe spécifique, il est en réalité possible de styliser le first. L'astuce consiste ensuite à utiliser 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>
21
joki

Je suppose que la réponse la plus correcte est: Utilisez :nth-child (Ou, dans ce cas précis, son pendant :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 second argument "de [tout sélecteur CSS]".

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

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:

6
hurrtz

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 manquiez pas totalement de chance, selon ce que vous souhaitez réaliser. Par exemple, en utilisant le sélecteur de fratrie suivant, j’ai ajouté un diviseur visuel après le dernier de vos .list éléments ici: http://jsbin.com/vejixisudo/edit?html,css,output

2
Reggie Pinkham

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

Ventilation de la réponse: je ne sélectionne que l'enfant (>) 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 restreindre le sélecteur à certaines listes non ordonnées. Par exemple: ul.my-class > li:last-of-type choisira le dernier <li> uniquement à partir des listes non ordonnées de cette classe

1
flen

Il existe une solution de contournement (dans des situations spécifiques) à ce problème:

Bien que cela ne réponde pas directement à la question, il existe une forte probabilité que cette façon de penser atteigne le même objectif:

Disons que nous sommes allés cacher tous les éléments de la liste inférieurs à index 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émo en direct

Cela éliminera la nécessité d'ajouter une classe hide à tous les éléments devant être masqués. Il ne nous reste donc qu'une classe, hide, qui les gouverne tous. maintenant, vous n'avez pas besoin d'utiliser le last-of-type qui ne peut pas fonctionner avec les noms de classe. vous devez repenser votre approche de la classification des choses

0
vsync