web-dev-qa-db-fra.com

: le dernier enfant ne travaille pas comme prévu?

Le problème réside dans ces CSS et HTML. Voici un lien vers jsFiddle avec l'exemple de code.

[~ # ~] html [~ # ~] 

<ul>
    <li class"complete">1</li>
    <li class"complete">2</li>
    <li>3</li>
    <li>4</li>
</ul>

[~ # ~] css [~ # ~] 

li.complete:last-child {
    background-color:yellow;
}

li.complete:last-of-type {
    background-color:yellow;
}

L'une ou l'autre de ces lignes CSS ne devrait-elle pas cibler le dernier élément li avec la classe "complète" ?

Cette requête dans jQuery ne la cible pas non plus:

$("li.complete:last-child");

Mais celui-ci fait:

$("li.complete").last();

li {
  background-color: green;
}
li.complete:first-child {
  background-color: white;
}
li.complete:first-of-type {
  background-color: red;
}
li.complete:last-of-type {
  background-color: blue;
}
li.complete:last-child {
  background-color: yellow;
}
<ul>
  <li class="complete">1</li>
  <li class="complete">2</li>
  <li>3</li>
  <li>4</li>
</ul>
htmlcsshtml5css3css-selectors
62
Nej Kutcharian

Le sélecteur last-child Permet de sélectionner le dernier élément enfant d'un parent. Il ne peut pas être utilisé pour sélectionner le dernier élément enfant avec une classe spécifique sous un élément parent donné.

L'autre partie du sélecteur composé (qui est attaché avant le :last-child) Spécifie des conditions supplémentaires que le dernier élément enfant doit remplir pour pouvoir être sélectionné. Dans l'extrait ci-dessous, vous verrez comment les éléments sélectionnés diffèrent en fonction du reste du sélecteur composé.

.parent :last-child{ /* this will select all elements which are last child of .parent */
  font-weight: bold;
}

.parent div:last-child{ /* this will select the last child of .parent only if it is a div*/
  background: crimson;
}

.parent div.child-2:last-child{ /* this will select the last child of .parent only if it is a div and has the class child-2*/
  color: beige;
}
<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div>Child w/o class</div>
</div>
<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child-2'>Child w/o class</div>
</div>
<div class='parent'>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <div class='child'>Child</div>
  <p>Child w/o class</p>
</div>

Pour répondre à votre question, ce qui suit qualifie le dernier élément enfant li avec la couleur de fond rouge.

li:last-child{
    background-color: red;
}

Mais le sélecteur suivant ne fonctionnerait pas pour votre balisage car le last-child Ne possède pas le class='complete' Même s'il s'agit d'un li.

li.complete:last-child{
    background-color: green;
}

Cela aurait fonctionné si (et seulement si) le dernier li de votre balisage avait aussi class='complete'.

Pour adresser votre requête dans le commentaires :

@ Harry Je trouve assez étrange que: .complete: le dernier type ne fonctionne pas, mais .complete: le premier type fonctionne, quelle que soit sa position, c'est l'élément parents. Merci de votre aide.

Le sélecteur .complete:first-of-type Fonctionne dans le violon car il (c'est-à-dire l'élément avec class='complete') Est toujours le premier élément de type li dans le parent. Essayez d'ajouter <li>0</li> En tant que premier élément sous ul et vous constaterez que first-of-type Est également défaillant. En effet, les sélecteurs first-of-type Et last-of-type Sélectionnent le premier/dernier élément de chaque type sous le parent.

Reportez-vous à la réponse publiée par BoltClock, dans this thread pour plus de détails sur le fonctionnement du sélecteur. C'est aussi complet que ça devient :)

112
Harry

: last-child ne fonctionnera pas si l'élément n'est pas le dernier élément

En plus de la réponse de Harry, je pense qu'il est crucial d'ajouter/de souligner que: last-child ne fonctionnera pas si l'élément n'est pas l'élément TRÈS DERNIER dans un conteneur. Pour une raison quelconque, cela m'a pris des heures pour réaliser cela, et même si la réponse de Harry est très complète, je ne pouvais pas extraire cette information de "Le sélecteur de dernier enfant est utilisé pour sélectionner le dernier élément enfant d'un parent."

Supposons que ce soit mon sélecteur: a:last-child {}

Cela marche:

<div>
    <a></a>
    <a>This will be selected</a>
</div>

Cela ne veut pas:

<div>
    <a></a>
    <a>This will no longer be selected</a>
    <div>This is now the last child :'( </div>
</div>

Ce n'est pas le cas, car l'élément a n'est pas le dernier élément de son parent.

C'est peut-être évident, mais ce n'était pas pour moi ...

78
Govind Rai

Je rencontre une situation similaire. J'aimerais que l'arrière-plan du dernier .item Soit jaune dans les éléments qui ressemblent à ...

<div class="container">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  ...
  <div class="item">item x</div>
  <div class="other">I'm here for some reasons</div>
</div>

J'utilise nth-last-child(2) pour y parvenir.

.item:nth-last-child(2) {
  background-color: yellow;
}

C’est étrange pour moi parce que le nième-dernier-enfant de l’article suppose être le deuxième élément du dernier article, mais cela fonctionne et j’ai obtenu le résultat tel que prévu. J'ai trouvé cette astuce utile de astuce CSS

0
worrawut