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() et odd Les pseudo-classes sont fonctionnelles et peuvent accepter les paramètres sous la forme de even mot-clé, An B mot-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-type CSS 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,

et

ont le moins d'effets secondaires lorsqu'ils sont définis par des sélecteurs simples.

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

Jetons un coup d'œil aux HTML et CSS ci-dessous:

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é

et .

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:

• odd Mots-clés
• even Mots-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:

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

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:

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

Cela nous donne les résultats suivants.

Mais que se passe-t-il si nous voulons sélectionner tous les trois éléments? C'est là que

grammaire entre en jeu: An B

<code class="language-css">tr:nth-child(even) {
  background: rgba(96, 125, 139, 0.1);
}</code>

De même, A est l'intervalle de longueur de pas. C'est presque comme un multiplicateur de n, à commencer par 1. Par conséquent, si A = 3, alors 3n correspondra aux éléments tels que 3, 6, 9. C'est exactement ce qui se passe, comme vous pouvez le voir ci-dessous.

Il y a un endroit où les choses deviennent plus intéressantes. Nous pouvons utiliser

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()

<code class="language-css">.item:nth-child(6) {
  background: #e91e63;
}</code>

Il n'y a pas de valeur de taille de pas ici. Par conséquent, N 8 correspond à chaque élément n à partir du huitième élément, comme indiqué ci-dessous.

Remarque: décalage négatif

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)

Nous pouvons également sélectionner tous les trois éléments en utilisant des valeurs de décalage et de taille de pas, à partir du cinquième:

<code class="language-css">.item:nth-child(3n) {
  background: #e91e63;
}</code>

Vous pouvez voir les résultats de ce sélecteur dans l'image suivante.

: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

<code class="language-css">.item:nth-child(n+8) {
  background: #e91e63;
}</code>

Utilisation

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:

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

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:

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

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():

<code class="language-css">tr:nth-child(even) {
  background: rgba(96, 125, 139, 0.1);
}</code>

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).

Quelle est la différence entre

: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>

Comment sélectionner le premier, le deuxième ou le troisième élément à l'aide du nom de classe donné?

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)

Puis-je utiliser des valeurs négatives dans

? :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

Comment sélectionner chaque élément uniforme ou étrange?

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)

Puis-je utiliser

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

Puis-je utiliser

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

Toutes les images restent dans leur format et leur emplacement d'origine. <p></p>

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!