Maison > Article > interface Web > Comment sélectionner le « dernier enfant » d'une catégorie spécifique en utilisant CSS ?
Comment sélectionner le « dernier enfant » d'une catégorie spécifique en utilisant CSS ?
- WBOYavant
- 2023-08-29 11:13:171120parcourir
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 */
}
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.
<html>
<head>
<title>Program to select the last child using :last-child() selector</title>
<style>
/* Using the :last-child Selector */
.item:last-child {
background-color: green;
padding: 10px;
}
</style>
</head>
<body>
<h2>Method: Using the :last-child Selector</h2>
<div class="item">First Item</div>
<div class="item">Second Item</div>
<div class="item">Third Item</div>
<div class="item">Fourth or Last Item</div>
</body>
</html>
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 */
}
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é.
<html>
<head>
<title>Program to select the last child using :nth-last-child() selector</title>
<style>
/* Using the :last-child Selector */
.item:nth-last-child(1) {
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<h2>Method: Using the :nth-last-child Selector</h2>
<div class="item">First Item</div>
<div class="item">Second Item</div>
<div class="item">Third Item</div>
<div class="item">Fourth or Last Item</div>
</body>
</html>
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);
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().
<html>
<head>
<title>Program to select the last child using JavaScript</title>
<style>
/* Styling for divs */
.item {
background-color: #f1f1f1;
padding: 10px;
margin-bottom: 10px;
}
/* Styling for last div */
.highlight { background-color: yellow;}
</style>
</head>
<body>
<h2>Method: Using JavaScript</h2>
<div class="item">First Item</div>
<div class="item">Second Item</div>
<div class="item">Third Item</div>
<div class="item">Fourth or Last Item</div>
<script>
// Selecting the last div element with class "item"
var lastDiv = document.querySelector('.item:last-child');
// Adding the "highlight" class to the last div element to change its background color
lastDiv.classList.add('highlight');
</script>
</body>
</html>
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!