:last-child CSS sélecteur

Définition de la CSS :last-child.

La pseudo-classe CSS :last-child permet de cibler le dernier fils d'un élément HTML ou XHTML afin de lui assigner des propriétés CSS.

Exemple de syntaxe CSS :last-child :
:last-child{
  /* Propriétés CSS assignées au dernier enfant de toutes balises */
}
identifiant :last-child{
  /* Propriétés CSS assignées au dernier enfant des balises HTML ayant comme parent direct ou indirect "identifiant" */
}
identifiant b:last-child{
  /* Propriétés CSS assignées au dernier enfant de type balise B dont le parent a comme parent direct ou indirect "identifiant" */
}

Si vous mettez un sélecteur accolé et devant ":" de la pseudo-classe :last-child CSS, alors seul les fils correspondant à la règle de ce sélecteur seront pris en compte.

Il est possible de remplacer :last-child en utilisant une autre pseudo-classe Css.

Conditions d'application de la CSS :last-child.

Utiliser la CSS :last-child revient à faire :nth-last-child(1).
La pseudo-classe de feuille de style :last-child CSS ne peut pas se déclarer dans l'attribut HTML ou XHTML STYLE.
La pseudo-classe CSS :last-child doit être déclarée dans une balise HTML ou XHTML .

Problème d'interprétation de :last-child en Css.

La pseudo-classe de feuille de style :last-child CSS n'est prise en compte qu'a partir de la version d'Internet Explorer 9+, Safari 3.1+ et Opera 9.5.

Règles de syntaxes CSS pour :last-child.

Les boites anonymes et le sélécteur Css :last-child

Attention : Les boites anonymes n'apparaissent pas dans l'arbre du document, c'est pourquoi elles ne sont pas prises en compte au moment de la mise en forme du dernier enfant.

Info complémentaire sur le sélécteur Css :last-child

Attention, la pseudo-classe CSS ":last-child" a une écriture un peu spéciale, "last-child" est toujours précédée de ":".

La pseudo-classe CSS :last-child ne peut pas être déclarée dans une balise HTML ou XHTML avec l'attribut HTML ou XHTML "STYLE" ou dans une feuille de style externe.
Elle se déclare dans une balise HTML ou XHTML "" de votre page :

Exemple d'écriture CSS :last-child dans une balise STYLE
<STYLE>
  input:last-child{}
</STYLE>

La pseudo-classe CSS :last-child peut être remplacée par la pseudo-classe CSS

Exemple d'équivalence avec :nth-last-child()
:last-child{}
//Identique à 
:nth-last-child(1){}

Compatibilités navigateurs du sélecteur :last-child

Exemples et astuces CSS pour utiliser :last-child

Comprendre l'écriture du sélécteur Css :last-child

La pseudo-classe CSS :last-child s'applique au dernier fils de tous les éléments HTML ou XHTML. Vous pouvez donc si nécessaire mettre un sélecteur devant pour conditionner la sélection du dernier fils, sinon les propriétés seront appliquées à l'ensemble des éléments HTML ou XHTML qui répondent à :last-child.

Pour schématiser, il faut imaginer que par défaut la pseudo-classe CSS :last-child s'écrit *:last-child. "*" représente la condition soit "n'importe quel élément" (sélectionne tous les derniers fils sans distinction).
Donc pour conditionner plus précisément la sélection, il faut juste remplacer "*" par un autre sélecteur qui vous permettra de distinguer les derniers fils que vous voulez sélectionner.
Ce sélecteur doit être unique (classe, id, balise ou pseudo-classe) ou multiple à condition de ne pas contenir d'espace entre chaque sélecteur, sinon on passe dans le cas d'un chemin de sélection pour sélectionner le parent (vous comprendrez mieux avec les exemples qui suivent).

Exemple d'écriture CSS de :last-child avec règle
:last-child{
  /* Propriétés CSS assignées à l'ensemble des derniers enfants, de n'importe quel élément */
}
b:last-child{
  /* Propriétés CSS assignées à l'ensemble des derniers enfants de type balise B, de n'importe quel élément */
}
.regle:last-child{
  /* Propriétés CSS assignées à l'ensemble des derniers enfants de class "regle", de n'importe quel élément */
}
:checked:disabled:last-child{
  /* Propriétés CSS assignées à l'ensemble des derniers enfants qui corresponde à la règle :checked et :disabled, de n'importe quel élément */
}

Maintenant, vous pouvez être plus précis pour cibler l'élément parent dans lequel vous voulez sélectionner les derniers fils, en mettant un chemin de sélection devant :

Exemple d'écriture CSS de :last-child avec ciblage de parent
.identifant b:last-child{
  /* Propriétés CSS assignées à l'ensemble des derniers enfants de type balise B, dont le parent direct ou indirect a la classe "identifant" */
}
.identifant .regle:last-child{
  /* Propriétés CSS assignées à l'ensemble des derniers enfants de class "regle", dont le parent direct ou indirect a la classe "identifant" */
}
.identifant :checked:disabled:last-child{
  /* Propriétés CSS assignées à l'ensemble des derniers enfants qui correspondent à la règle :checked et :disabled, dont le parent  direct ou indirect a la classe "identifant" */
}

Votre avis sur la définition :last-child en CSS

Votez pour la définition CSS :last-child

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/last-child-css-selector.html Votes: 4.5 / 5 - 18 votes
Cliquez sur une étoile pour voter.