Maison >interface Web >tutoriel CSS >Comment sélectionner tous les éléments enfants d'un élément (sauf le dernier) en utilisant CSS ?
Comment sélectionner tous les éléments enfants d'un élément (sauf le dernier) en utilisant CSS ?
- PHPzavant
- 2023-09-16 08:45:072204parcourir
CSS est un style de page Web couramment utilisé. Lors du développement d’applications Web, nous devons parfois appliquer différents styles à différents éléments. Cette exigence courante est de sélectionner tous les éléments enfants d'un élément sauf le dernier ! Appliquez CSS pour sélectionner tous les éléments enfants d'un élément (sauf le dernier élément enfant).
Dans cet article, nous apprendrons comment sélectionner tous les éléments enfants sauf le dernier en CSS en utilisant différentes méthodes. Nous aborderons chaque méthode et sa syntaxe en détail, ainsi que des exemples pour vous aider à comprendre leur fonctionnement.
La première façon de sélectionner tous les éléments enfants sauf le dernier consiste à utiliser le sélecteur :not(), qui vous permet de sélectionner tous les éléments qui ne correspondent pas à un sélecteur spécifique. La deuxième méthode consiste à utiliser le sélecteur :nth-last-child(), qui sélectionne tous les éléments qui sont le nième enfant à partir de la fin de l'élément parent. Dans cette méthode, nous spécifions le paramètre n+2 qui permet de sélectionner tous les éléments enfants de l'élément (sauf le dernier élément enfant en HTML).
Ces deux méthodes sont très utiles lors du développement d'applications Web et peuvent aider à implémenter l'interface utilisateur requise pour la page Web. L'utilisation des sélecteurs décrits ci-dessus nous aide à comprendre comment ces sélecteurs fonctionnent et nous pouvons créer des styles personnalisés pour les fonctionnalités et l'interface utilisateur de nos pages Web.
Méthode 1 : Utilisez :pas de sélecteur
- Le sélecteur not est un puissant sélecteur CSS qui vous permet de sélectionner tous les éléments sauf ceux qui correspondent à une condition spécifique. Pour sélectionner tous les éléments enfants sauf le dernier, nous pouvons utiliser :not selector avec le sélecteur :last-child.
Pour utiliser le sélecteur - not() pour sélectionner tous les enfants d'un élément (sauf le dernier enfant), nous l'utilisons avec le sélecteur :last-child. :last-child selector permet de sélectionner le dernier élément enfant d'un élément. En utilisant une combinaison de cette approche avec deux sélecteurs, nous pouvons sélectionner tous les enfants d'un élément sauf le dernier.
Voici la syntaxe pour utiliser le sélecteur :not() pour sélectionner tous les éléments enfants d'un élément parent (sauf le dernier élément enfant) -
Grammaire
Dans la syntaxe ci-dessous, .parent est le sélecteur de l'élément parent, > sélectionne tous ses enfants immédiats, * sélectionne tous les éléments enfants et :not(:last-child) exclut le dernier élément enfant de la sélection.
.parent > *:not(:last-child) {
/* styles for all children except the last one */
}
Exemple
Dans cet exemple, le sélecteur CSS .parent > *:not(:last-child) sélectionne tous les enfants directs de l'élément de classe .parent (c'est-à-dire les éléments h1, h2, p et span), à l'exception du dernier élément enfant, c'est-à-dire élément. En utilisant CSS, nous appliquons la propriété "color" aux trois premiers éléments enfants de l'élément .parent (c'est-à-dire les éléments h1, h2 et p), tandis que le quatrième élément enfant (c'est-à-dire l'élément ) n'est pas affecté. 跨度>跨度>
Voyons maintenant comment appliquer le code CSS au code de la page HTML -
<!DOCTYPE html>
<html >
<head>
<style>
.parent > *:not(:last-child) {
color: green;
}
</style>
</head>
<body>
<div class="parent">
<h1>First Child</h1>
<h2>Second Child</h2>
<p>Third Child</p>
<span>Fourth Child</span>
</div>
</body>
</html>
Méthode 2 : utilisez le sélecteur :nth-last-child()
- Le sélecteur nth-last-child() est un autre outil utile en CSS qui vous permet de sélectionner des éléments en fonction de leur position dans la liste des enfants de l'élément. Nous pouvons l'utiliser pour sélectionner tous les enfants sauf le dernier en utilisant :nth-last-child(n+2) pour sélectionner tout sauf le dernier enfant.
Pour utiliser le sélecteur :nth-last-child() pour sélectionner tous les éléments enfants sauf le dernier élément enfant, nous pouvons spécifier le paramètre n+2. Les paramètres définis utilisent CSS pour sélectionner tous les éléments du HTML à l'exception du dernier élément enfant, qui est le dernier élément enfant.
Voici la syntaxe pour utiliser le sélecteur :nth-last-child() pour sélectionner tous les éléments enfants d'un élément parent (sauf le dernier élément enfant) -
Grammaire
Dans la syntaxe suivante, .parent est le sélecteur de l'élément parent, > sélectionne tous ses éléments enfants directs, * sélectionne tous les éléments enfants, :nth-last-child(n+2) sélectionne tous les enfants sauf le dernier Enfants élémentaires .
.parent > *:nth-last-child(n+2) {
/* styles for all children except the last one */
}
Exemple
Dans cet exemple, le sélecteur CSS .parent > *:nth-last-child(n+2) sélectionne tous les enfants directs de l'élément de classe .parent, à l'exception du dernier enfant. Ici, tous les éléments de bouton à l'intérieur de l'élément .parent seront sélectionnés, mais le dernier élément de bouton ne sera pas sélectionné.
Plusieurs propriétés CSS ont été appliquées aux trois premiers boutons, mais le style CSS n'est pas ajouté au dernier bouton enfant.
Voyons maintenant comment appliquer le code CSS au code de la page HTML -
<!DOCTYPE html>
<html >
<head>
<style>
.parent > *:nth-last-child(n+2) {
background-color: green;
padding: 10px;
color: white;
border-radius: 10px;
width: 10em;
text-decoration: none;
font-family: sans-serif;
border: none;
}
</style>
</head>
<body>
<div class="parent">
<button>First</button>
<button>Second</button>
<button>Third</button>
<button>Fourth</button>
</div>
</body>
</html>
结论
在本文中，我们了解了如何使用不同的方法选择元素的所有子元素（除了最后一个子元素）。在 CSS 选择器的帮助下，选择子项是一个轻松的过程，因为它提供了多个可用于执行此任务的选择器，例如 :not() 选择器和 :nth-last-child() 选择器。上面讨论的两个示例都展示了 CSS 在将不同样式应用于元素的所有子元素（最后一个元素除外）方面的作用。这两个选择器都可以帮助我们轻松地将不同的 CSS 样式应用于不同的 HTML 元素，不仅如此，它还有助于轻松创建动态网站。
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!