Maison> interface Web> tutoriel CSS> le corps du texte

Comment sélectionner le « dernier enfant » d'une catégorie spécifique en utilisant CSS ?

WBOY
Libérer: 2023-08-29 11:13:17
avant
960 Les gens l'ont consulté

如何使用 CSS 选择特定类别的“最后一个孩子”?

CSS ou feuilles de style en cascade sont une partie importante du développement Web moderne, qui permet aux développeurs Web d'ajouter des styles à leurs sites Web et de créer des conceptions visuellement attrayantes. Parfois, nous souhaitons sélectionner le dernier élément enfant d’une classe spécifique en utilisant CSS, mais comment y parvenir ? Il existe différentes manières de sélectionner le dernier élément enfant.

Dans cet article, nous verrons comment sélectionner le dernier élément enfant avec une classe spécifique en utilisant CSS.

Méthode 1 utilisant le sélecteur :last-child() :

: La méthode de sélection last-child() est la première méthode disponible en CSS. Ce sélecteur permet de sélectionner le dernier élément enfant de son élément parent. Le processus de sélection du dernier élément enfant est très simple. Pour sélectionner le dernier élément enfant avec une classe spécifique, nous utilisons le sélecteur :last-child en combinaison avec le sélecteur de classe.

Consultez la syntaxe ci-dessous pour savoir comment utiliser le sélecteur de dernier enfant pour sélectionner le dernier élément.

Grammaire

Dans cette syntaxe, supposons que nous ayons une liste d'éléments avec le nom de classe "item" et que nous souhaitions styliser différemment le dernier élément de la liste, pour ce faire, nous pouvons utiliser le code CSS suivant-

.item:last-child { /* Add your CSS styles here */ }
Copier après la connexion

La syntaxe ci-dessus sélectionnera le dernier élément enfant avec la classe "item" et lui appliquera le style spécifié.

Exemple

Dans cet exemple, nous utilisons le sélecteur :last-child() pour sélectionner le dernier élément div portant le nom de classe "item" et y ajoutons des styles CSS, tels que la couleur d'arrière-plan verte et le remplissage 10px.

  Program to select the last child using :last-child() selector  

Method: Using the :last-child Selector

First Item
Second Item
Third Item
Fourth or Last Item
Copier après la connexion

Méthode 2 : utilisez le sélecteur :nth-last-child()

C'est la deuxième façon de sélectionner le dernier élément enfant avec une classe spécifique en CSS. Le sélecteur :nth-last-child est utilisé pour sélectionner des éléments en fonction de leur position par rapport à la fin de l'élément parent.

Le travail de ce sélecteur est très simple. Pour sélectionner le dernier enfant d'une classe spécifique à l'aide du sélecteur :nth-last-child, nous devons le combiner avec le sélecteur de classe et définir la valeur sur 1. Voir la syntaxe suivante pour plus de détails sur la façon dont nth-last est utilisé - le sélecteur enfant est utilisé pour sélectionner le dernier élément.

Grammaire

Dans cette syntaxe, en supposant que nous ayons une série d'éléments div avec le nom de classe "div-box", et maintenant pour styliser le dernier élément div de cette série, nous pouvons utiliser le code CSS suivant :

.div-box:nth-last-child(1) { /* Add your CSS styles here */ }
Copier après la connexion

La syntaxe ci-dessus sélectionnera le dernier élément enfant avec le nom de classe "div-box" et lui appliquera le style spécifié.

Exemple

La syntaxe ci-dessus sélectionnera le dernier élément enfant avec le nom de classe "div-box" et lui appliquera le style spécifié.

  Program to select the last child using :nth-last-child() selector  

Method: Using the :nth-last-child Selector

First Item
Second Item
Third Item
Fourth or Last Item
Copier après la connexion

Comment utiliser JavaScript

Dans cette méthode, nous sélectionnons le dernier enfant d'une classe spécifique en utilisant JavaScript. Bien que CSS soit la méthode préférée pour styliser les pages Web, JavaScript peut également être utilisé pour effectuer des opérations de modèle d'objet de document et sélectionner dynamiquement des éléments HTML.

En JavaScript, la méthode querySelector() est utilisée avec le sélecteur de classe et le sélecteur :last-child pour sélectionner le dernier enfant d'une classe spécifique.

Le processus de sélection du dernier enfant à l'aide de JavaScript est également simple. Pour sélectionner le dernier enfant d'une classe spécifique à l'aide de javascript, nous devons le combiner avec le :last-child-selector de la classe et CSS. Consultez la syntaxe suivante pour plus de détails sur la façon de sélectionner le dernier élément à l'aide de javascript.

Grammaire

Dans cette syntaxe, nous avons une série d'éléments div avec la classe "div" et nous voulons ajouter la classe "add-color" au dernier div de la liste, nous pouvons utiliser le code JavaScript suivant -

ar lastDiv = document.querySelector('.div:last-child'); lastDiv.classList.add(add-color);
Copier après la connexion

La syntaxe ci-dessus sélectionnera le dernier élément enfant avec la classe "div" et y ajoutera la classe "add-color".

Exemple

Dans cet exemple, nous définissons une liste d'éléments div avec le nom de classe "item" puis nous ajoutons également quelques styles CSS. Maintenant, pour sélectionner le dernier élément enfant, nous définissons une classe appelée "highlight" et Twitch stylisera le dernier élément div.

Ici, nous avons utilisé la méthode querySelector() en JavaScript, qui sélectionne le dernier élément enfant avec « class » comme « item ». Ensuite, nous avons également ajouté la classe "highlight" à l'élément sélectionné à l'aide de la méthode classList.add().

  Program to select the last child using JavaScript  

Method: Using JavaScript

First Item
Second Item
Third Item
Fourth or Last Item
Copier après la connexion

Conclusion

La sélection du dernier élément enfant avec une classe spécifique à l'aide de CSS est une tâche qui peut être réalisée de différentes manières. Le sélecteur :last-child() et le sélecteur :nth-last-child() sont deux méthodes qui peuvent être utilisées pour accomplir cette tâche.

:le sélecteur last-child() est utilisé pour sélectionner le dernier élément enfant de son élément parent. Pour sélectionner le dernier élément enfant d'une classe spécifique, nous utilisons le sélecteur :last-child en conjonction avec le sélecteur de classe. D'autre part, le sélecteur :nth-last-child() est utilisé pour sélectionner des éléments en fonction de leur position par rapport à la fin de l'élément parent. Pour sélectionner le dernier élément enfant d'une classe spécifique à l'aide du sélecteur :nth-last-child, nous devons le combiner avec le sélecteur de classe et définir la valeur sur 1.

Pour résumer, les deux méthodes sont efficaces pour sélectionner le dernier élément enfant avec une classe spécifique, et la méthode à utiliser dépend des besoins spécifiques du développeur Web. En utilisant ces sélecteurs, les développeurs Web peuvent améliorer l'apparence et les fonctionnalités de leurs sites Web pour les rendre plus attrayants pour les utilisateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:tutorialspoint.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!