CSS pseudo-classes: éléments de style basés sur leur index
Sélecteur CSS: sélection de pseudo-classe basée sur la position des éléments dans le document sous-arbre
Points de base
- CSS fournit un sélecteur appelé un sous-index pseudo-classe pour correspondre aux éléments en fonction de leur position dans le sous-arbre document. Ceux-ci incluent
:first-child,:last-child,:only-child,:nth-child(),:nth-last-child()et . -
:nth-child():nth-last-child()etoddLes pseudo-classes sont fonctionnelles et peuvent accepter les paramètres sous la forme deevenmot-clé,An Bmot-clé, entier ou , où A est l'intervalle d'étape et B est le Le changement de biais, n est un entier positif. -
:only-child<code>:empty pseudo-classe correspond à l'élément si l'élément est le seul enfant d'un autre élément. La pseudo-classe peut sélectionner des éléments sans éléments enfants, pas même des espaces. -
:first-of-typeCSS fournit des pseudo-classes de sous-index typées qui correspondent aux éléments basées sur les valeurs d'index, mais sont limitées aux éléments d'un type spécifique. Ceux-ci incluent:last-of-type,:only-of-type,:nth-of-type(),:nth-last-of-type(), et
- CSS fournit également des sélecteurs pour les éléments correspondants en fonction de leur position dans le sous-arbre du document. Ceux-ci sont appelés pseudo-classes sous-index car elles dépendent de la position ou de l'ordre de l'élément, pas de son type, de son attribut ou de son ID. Il y en a cinq au total:
-
:first-child -
:last-child -
:only-child -
:nth-child() -
:nth-last-child()
:first-child
:last-child
et :first-child
:last-child Comme vous l'avez deviné à partir du nom, les pseudo-classes :first-child et :last-child peuvent être utilisées pour sélectionner des éléments qui sont les premiers ou derniers éléments enfants d'un nœud (élément). Comme les autres pseudo-classes,
ont le moins d'effets secondaires lorsqu'ils sont définis par des sélecteurs simples.
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>
Vous pouvez voir à quoi il ressemble sur l'image ci-dessous. 
:first-child
h2 Parce que li n'est pas limité, l'élément h2 et le premier élément body sont roses. Après tout, li est le premier élément enfant de ul, et li est le premier élément enfant de l'élément :last-child. Mais pourquoi les éléments ul restants sont-ils verts? En effet, body n'est pas limité non plus, *:first-child est le dernier élément enfant de *:last-child. Nous avons en fait tapé
Si nous qualifions :first-child et :last-child en ajoutant un sélecteur simple, cela est plus logique. Limitons la sélection pour répertorier les éléments. Changer :first-child en li:first-child, et :last-child vers li:last-child. La figure suivante montre les résultats.
:nth-child() et :nth-last-child()
C'est bien de pouvoir sélectionner les premier et dernier éléments enfants du document. Mais que se passe-t-il si nous voulons sélectionner des éléments étranges ou même? Peut-être que nous voulons sélectionner le sixième élément du sous-arbre du document, ou appliquer le style à tous les trois éléments. C'est là que les pseudo-classes :nth-child() et :nth-last-child() entrent en jeu.
like :not(), :nth-child() et :nth-last-child() sont également des pseudo-classes fonctionnelles. Ils acceptent un paramètre qui devrait être:
-
oddMots-clés -
evenMots-clés - un entier, comme 2 ou 8, ou Paramètres dans la forme
-
An B, où A est l'intervalle de pas, B est le décalage et n est la variable représentant un entier positif.
Le dernier élément a une certaine complexité. Nous en discuterons plus tard.
Quelle est la différence entre :nth-child() et :nth-last-child()? Point de départ: :nth-child() Comptez vers l'avant, :nth-last-child() Comptez vers l'arrière. L'indice CSS utilise des nombres de comptage, en commençant par 1 au lieu de 0.
:nth-child() et :nth-last-child() peuvent être utilisés dans des modes alternés. La création de couleurs de table de table de motif zèbre est le cas d'utilisation parfait. Le CSS suivant fournit un fond bleu clair-gris pour les lignes de table uniformes, et le résultat peut être vu dans la figure suivante:
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body> 
La commutation :nth-child vers :nth-last-child inversera cette bande car le nombre commence en bas, comme indiqué ci-dessous.
Comment essayer des exemples complexes de paramètres plus complexes? Nous commencerons par le document ci-dessous, qui contient 20 éléments.
En utilisant :nth-child() et :nth-last-child(), nous pouvons sélectionner des éléments enfants individuels à un emplacement spécifique. Nous pouvons sélectionner tous les éléments enfants de après une position spécifique, ou nous pouvons sélectionner des éléments par multiples, avec un décalage. Changeons la couleur d'arrière-plan du sixième projet:
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>
grammaire entre en jeu: An B
tr:nth-child(even) {
background: rgba(96, 125, 139, 0.1);
}
et :nth-child() pour sélectionner tous les éléments après un point. Essayons de sélectionner tous les éléments sauf les sept premiers éléments: :nth-last-child()
.item:nth-child(6) {
background: #e91e63;
}
Le décalage négatif et les valeurs de plage sont également valides. L'utilisation de
inversera notre sélection et correspondra aux huit premiers éléments. :nth-child(-n 8)
.item:nth-child(3n) {
background: #e91e63;
}
:only-child
Si l'élément est un enfant unique Snique d'un autre élément, alors le pseudo-classe correspond à cet élément. Vous trouverez ci-dessous deux listes non ordonnées. Le premier a un projet, tandis que le second en contient trois: :only-child
.item:nth-child(n+8) {
background: #e91e63;
} Apple sera sélectionné car il s'agit du seul élément enfant de notre première liste. Cependant, tous les éléments de la deuxième liste ne correspondent pas car il y a trois éléments de frère. Vous pouvez voir à quoi il ressemble sur l'image ci-dessous. li:only-child{color: #9c27b0;}
<code>:empty
Vous pouvez également utiliser les éléments <code>:empty pseudo-classe pour sélectionner des éléments sans éléments enfants . Lorsque nous disons <code>:empty, nous voulons dire vide . Pour faire correspondre l'élément à correspondre à la pseudo-classe, il ne peut contenir rien d'autre, même des espaces. En d'autres termes, <code>:empty <p></p> correspondra, mais <code><p> </p> <code>:empty ne correspondra pas. Parfois, l'éditeur WYSIWYG insère un élément P vide dans votre contenu. Vous pouvez utiliser :not() en combinaison avec p:not(:empty) pseudo-classes pour éviter d'appliquer des styles à ces éléments;
Sélectionnez des types d'éléments spécifiques par leur index
La pseudo-classe discutée dans la section précédente correspond à l'élément s'il occupe une position donnée dans le sous-arbre du document. Par exemple, p:nth-last-child(2) sélectionne chaque élément P qui est l'élément avant-dernier de son élément parent.
Dans cette section, nous discuterons des pseudo-classes de sous-index. Ces pseudo-classes correspondent également aux éléments en fonction de leurs valeurs d'indextes; cependant, les correspondances sont limitées aux éléments d'un type spécifique. Par exemple, sélectionnez l'élément cinquième P ou l'élément H2 avec un index uniforme.
Il y a cinq de ces pseudo-classes avec le même nom que leur homologue non type:
-
:first-of-type -
:last-of-type -
:only-of-type -
:nth-of-type() -
:nth-last-of-type()
La différence entre ces pseudo-classes et les pseudo-classes sous-index est subtile. Où p:nth-child(5) correspond au cinquième élément uniquement s'il s'agit d'un élément P, p:nth-of-type(5) correspond à tous les éléments P, puis trouve le cinquième élément P parmi ces éléments.
Commençons par un document légèrement différent. Il a encore 20 éléments, mais certains d'entre eux sont des éléments P et certains sont des éléments div. L'élément P a des coins arrondis comme indiqué ci-dessous.
utiliser :first-of-type, :last-of-type et :only-type
En utilisant :first-of-type, nous pouvons sélectionner le premier élément qui correspond au sélecteur. Comment fournir un fond vert lime pour le premier élément p:
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>Cela correspondra à chaque élément p qui est le premier élément p de son élément parent, comme indiqué ci-dessous.
:last-of-type La pseudo-classe fonctionne de manière similaire, ce qui correspond au dernier élément de ce type de son élément parent, comme illustré ci-dessous. Cependant, si un élément est un Snique de son élément parent, alors :only-of-type correspondra à cet élément comme indiqué ci-dessous.
Regardons un autre exemple en utilisant :first-of-type, mais cette fois en utilisant un pseudo-élément. Vous souvenez-vous encore du pseudo-élément ::first-letter mentionné plus tôt dans ce chapitre? Eh bien, comme vous pouvez le voir, il crée une lettre majuscule initiale pour chaque élément qui l'applique. Allons plus loin et limitons cette lettre majuscule initiale au premier paragraphe:
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>Comme indiqué dans l'image suivante, maintenant notre paragraphe aura une lettre majuscule initiale, même si elle est précédée par le titre.
utiliser :nth-of-type et :nth-last-of-type
:nth-of-type() et :nth-last-of-type() sont également des pseudo-classes fonctionnelles. Ils acceptent les mêmes paramètres que :nth-child() et :nth-last-child(). Mais comme :first-of-type et :last-of-type, l'index se résout vers le même type d'éléments. Par exemple, pour sélectionner le premier élément P et chaque élément P suivant, nous pouvons utiliser le mot-clé odd avec :nth-of-type():
tr:nth-child(even) {
background: rgba(96, 125, 139, 0.1);
}Comme vous pouvez le voir dans l'image ci-dessous, cela ne correspondra qu'à l'élément P Numéroé, et non à l'élément enfant numéroté impair.
De même, utilisez :nth-last-of-type(even) pour sélectionner un élément p uniforme, mais le nombre commence par le dernier élément P dans le document - dans ce cas élément 18 (voir ci-dessous).
Si cela semble toujours flou, utilisez l'outil nth-test de Paul Maloney ou consultez les exemples sur le Nth Master. Les deux projets sont d'excellents moyens d'en savoir plus sur ces pseudo-classes.
[5] Cette syntaxe An B est décrite dans le module de syntaxe CSS niveau 3.
FAQ sur CSS Pseudo-classes et styles d'élément basés sur l'index
Qu'est-ce qu'une pseudo-classe CSS?
CSS La pseudo-classe est un mot-clé ajouté au sélecteur et est utilisé pour spécifier l'état spécial de l'élément sélectionné. Par exemple, :hover peut être utilisé pour modifier la couleur d'un bouton lorsque le pointeur de l'utilisateur s'offre. Une pseudo-classe, avec la classe et l'identifiant, est un moyen d'appliquer des styles aux éléments sans changer les balises HTML.
:nth-child Comment fonctionnent les pseudo-classes?
:nth-child pseudo-classe correspond aux éléments basés sur la position des éléments dans un groupe d'éléments simultanés. Il utilise une syntaxe de type fonction :nth-child(an b) où "a" et "b" sont des valeurs entières. "N" est un compteur commençant à 0 et incréments de 1 pour chaque élément. "A B" signifie l'élément à sélectionner, en commençant par le premier élément (b = 1).
:nth-child et :nth-of-type?
:nth-child correspond aux éléments basés sur la position d'un élément dans tous ses éléments de frère, tandis que :nth-of-type ne considère que les positions dans des éléments de frères et sœurs du même type. Par exemple, s'il s'agit d'un élément <code>p:nth-child(2) , un deuxième élément enfant est sélectionné, et <p></p> sélectionnera le deuxième élément <code>p:nth-of-type(2) , et quel que soit son élément Position dans d'autres éléments de frères et sœurs. <p></p>
Vous pouvez utiliser le
pseudo-classe avec un sélecteur de classe. Par exemple, :nth-child sélectionnera le premier élément avec la classe "MyClass". N'oubliez pas que cela ne fonctionne que si l'élément est le premier enfant de son élément parent. .myClass:nth-child(1)
? :nth-child
Non, Les valeurs négatives ne sont pas autorisées. La valeur minimale que vous pouvez utiliser est 0, qui ne sélectionne aucun élément. :nth-child
Vous pouvez utiliser les mots clés "pair" et "étrange" avec
pour sélectionner chaque élément uniforme ou étrange. Par exemple, :nth-child sélectionnera chaque deuxième élément à partir du premier élément. :nth-child(even)
avec d'autres pseudo-classes? :nth-child
Oui, vous pouvez utiliser en combinaison avec d'autres pseudo-classes. Par exemple, :nth-child appliquera le style lorsque le pointeur de l'utilisateur planera sur le deuxième élément enfant. :nth-child(2):hover
Existe-t-il une différence de performance entre
et :nth-child? :nth-of-type
Dans la plupart des cas, les différences de performance sont négligeables. Cependant, lorsqu'il s'agit d'un grand nombre d'éléments, est probablement légèrement plus rapide car il ne considère que des éléments frères et sœurs du même type. :nth-of-type
avec des pseudo-éléments? :nth-child
Non, les pseudo-éléments ne peuvent pas être utilisés avec car ils ne sont pas considérés comme faisant partie de l'arbre de document. :nth-child
Y a-t-il des problèmes de compatibilité du navigateur? :nth-child
Tous les navigateurs modernes sont bien pris en charge . Cependant, il n'est pas pris en charge par Internet Explorer 8 ou plus tôt. Pour ces navigateurs, vous devrez peut-être utiliser JavaScript ou JQuery pour obtenir des effets similaires. :nth-child
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1662
14
1419
52
1311
25
1261
29
1234
24
Fontes variables de polices Google
Apr 09, 2025 am 10:42 AM
Je vois que Google Fonts a déployé un nouveau design (tweet). Comparé à la dernière grande refonte, cela semble beaucoup plus itératif. Je peux à peine faire la différence
Comment créer un compte à rebours animé avec HTML, CSS et JavaScript
Apr 11, 2025 am 11:29 AM
Avez-vous déjà eu besoin d'un compte à rebours sur un projet? Pour quelque chose comme ça, il pourrait être naturel d'atteindre un plugin, mais c'est en fait beaucoup plus
Guide des attributs de données HTML
Apr 11, 2025 am 11:50 AM
Tout ce que vous avez toujours voulu savoir sur les attributs de données dans HTML, CSS et JavaScript.
Une preuve de concept pour rendre Sass plus rapidement
Apr 16, 2025 am 10:38 AM
Au début d'un nouveau projet, la compilation SASS se produit en un clin d'œil. Cela se sent bien, surtout quand il est associé à BrowSersync, qui recharge
Comment nous avons créé un site statique qui génère des modèles tartan dans SVG
Apr 09, 2025 am 11:29 AM
Le tartan est un chiffon à motifs qui est généralement associé à l'Écosse, en particulier leurs kilts à la mode. Sur tartanify.com, nous avons rassemblé plus de 5 000 tartan
Comment construire des composants Vue dans un thème WordPress
Apr 11, 2025 am 11:03 AM
La directive en ligne en ligne nous permet de construire des composants Vue riches en tant qu'amélioration progressive par rapport au balisage WordPress existant.
PHP est A-OK pour les modèles
Apr 11, 2025 am 11:04 AM
Les modèles PHP obtiennent souvent un mauvais rap pour faciliter le code inférieur - mais cela ne doit pas être le cas. Voyons comment les projets PHP peuvent appliquer un base
Programmation sass pour créer des combinaisons de couleurs accessibles
Apr 09, 2025 am 11:30 AM
Nous cherchons toujours à rendre le Web plus accessible. Le contraste des couleurs est juste des mathématiques, donc Sass peut aider à couvrir les cas de bord que les concepteurs auraient pu manquer.
