Pseudo-classes structurelles

extrait du livre "HTML5 & CSS3 pour le monde réel, 2e édition" co-écrit par Alexis Goldstein, Louis Lazaris et Estelle Weyl. Ce livre est disponible dans les magasins du monde entier, et vous pouvez également acheter la version E-Book ici.

Jusqu'à présent, nous avons appris à localiser des éléments en fonction de leurs attributs et états. CSS3 nous permet également de positionner des éléments basés uniquement sur l'endroit où ils se trouvent dans l'étiquette. Ces sélecteurs sont classés comme pseudo-classes structurelles.

Maintenant, ces sélecteurs peuvent sembler complexes, mais ils ont plus de sens lorsque nous regardons comment les appliquer plus tard. Sauf pour IE8 et ci-dessous, IE9 et les versions plus récentes et tous les autres navigateurs prennent en charge ces sélecteurs:

:root L'élément racine, dans notre fichier html, est l'élément html.

E:nth-child(n) Ndth Sous-Element E. n Les paramètres sont expliqués dans la description ci-dessous.

E:nth-last-child(n) nth élément enfant F (compte à rebours du dernier). li:nth-last-child(1) correspondra au dernier élément dans n'importe quelle liste, qui est le même que li:last-child (voir les instructions ci-dessous).

E:nth-of-type(n) Dans un élément parent donné, le nième élément du type E est. La différence entre nth-child et nth-of-type est expliquée dans la description ci-dessous.

E:nth-last-of-type(n) est le même que nth-of-type(n), mais commence à partir du dernier élément de l'élément parent.

Description: Paramètres du sélecteur de structure

Il existe quatre pseudo-classes qui utilisent l'équation an b comme paramètres entre parenthèses, ou utilisent les mots clés odd et even. Les pseudo-catégories structurelles incluent :nth-child(an b), :nth-last-child(an b), :nth-of-type(an b) et :nth-last-of-type(an b). Dans l'équation an b, A est le multiplicateur comme entier, B est le décalage en tant qu'ender, et n est toujours la variable n.

Dans le cas le plus simple, vous pouvez passer un entier. Par exemple, E:nth-of-type(3) localisera le troisième élément E Child d'un élément monoparental. Vous pouvez passer l'un des deux mots clés odd ou even pour se localiser l'élément. Vous pouvez également passer des expressions numériques plus efficacement, comme E:nth-of-type(3n 1). 3n représente tous les trois éléments, définissant la fréquence, et 1 est le décalage. Le décalage par défaut est zéro, donc nth-of-type(3n) correspondra aux 3e, 6e et 9e éléments de la série, tandis que nth-of-type(3n 1) correspondra aux 1er, 4e, 7e, etc.

Les décalages négatifs sont également autorisés. CSS est basé sur le langage, pas les langages de programmation, donc les comptes commencent à 1, pas 0. Il ne peut pas y avoir d'espaces entre le multiplicateur A et la variable n, et le décalage doit être placé à la fin.

Avec ces pseudo-classes numériques, vous pouvez identifier les éléments que vous souhaitez localiser sans ajouter de classes à la balise. L'exemple le plus courant est un tableau, où chaque autre ligne est de couleur légèrement plus foncée pour une lecture plus facile. Nous avions l'habitude d'ajouter des classes étranges ou même à chaque tr pour y parvenir. Maintenant, nous pouvons simplement déclarer tr:nth-of-type(odd) pour localiser chaque ligne impair sans toucher la marque. Vous pouvez même aller plus loin avec la table de rayures en trois couleurs: position tr:nth-of-type(3n), tr:nth-of-type(3n 1) et tr:nth-of-type(3n 2) et appliquer une couleur différente pour chacune.

E:first-child Si E est le premier enfant de son élément parent, c'est l'élément E. C'est la même chose que E:nth-child(1).

E:last-child Si E est le dernier enfant de son élément parent, c'est l'élément E, comme E:nth-last-child(1).

:first-of-type est le même que :nth-of-type(1).

E:last-of-type est le même que :nth-last-of-type(1).

E:only-child Si E est le seul enfant de son élément parent, c'est l'élément E.

E:only-of-type Si E est le seul élément e de type dans l'enfant direct de son élément parent, alors c'est l'élément E.

Description: Sous-éléments et types

Lorsque vous utilisez les sélecteurs de structure de nth-of-type et nth-child, il est important de comprendre ce que signifient "sous-éléments" et "types" dans ce cas. "Sube Elements" Voir tous les éléments enfants qui correspondent au nombre et vérifiez si le prédécesseur correspond. Type regarde d'abord tous les éléments correspondant au prédécesseur, puis correspondent en fonction du nombre.

Pour p:nth-child(3n), le navigateur considère chaque troisième élément enfant de l'élément parent. Si l'élément enfant est P, il correspond; sinon, il ne correspond pas. Pour p:nth-of-type(3n), le navigateur regarde tous les enfants P de l'élément parent et correspond à tous les trois PS.

Les pseudo-classes structurelles sont basées sur des éléments parents et recommencent à compter pour chaque nouvel élément parent. Ils ne voient que des éléments qui sont des éléments enfants directs de l'élément parent. Les nœuds de texte ne font pas partie de l'équation.

E:empty Éléments sans éléments enfants;

hello

et

ne correspondra pas à

, mais p:empty

et

va correspondre. Ce sélecteur correspond également aux éléments vides ou non valides, tels que

et.

Éléments dans les langues qui utilisent des abréviations à deux lettres (par exemple EN). Contrairement à E:lang(en) (où l'attribut E:[lang|=en] doit exister en tant qu'attribut de l'élément e), si la langue est déclarée sur l'élément lui-même ou sur un ancêtre, lang correspondra à E. E:lang(en)

Ceci est particulièrement utile: il sélectionnera l'élément qui correspond au sélecteur entre parenthèses. E:not(exception)

Le sélecteur avec le :not pseudo-classe correspond à tout à gauche du côlon, puis exclut les éléments de ce groupe de match qui correspond également au contenu à droite du côlon. Le match gauche est préféré. Par exemple, p:not(.copyright) correspondra d'abord à tous les paragraphes du document, puis exclura tous les paragraphes qui ont également des classes de copyright de cette collection. Vous pouvez rejoindre plusieurs pseudo-classes :not. input:not([type=checkbox]):not([type=radio]) correspondra à tous les éléments d'entrée de la page, à l'exception des éléments de la case de type ou du bouton radio.

FAQS sur les pseudoclasses structurelles

Quels sont les différents types de pseudo-classes structurelles?

Les pseudo-classes structurelles sont un sous-ensemble de pseudo-classes CSS qui vous permettent de sélectionner et de styliser des éléments en fonction de leur position dans l'arborescence de documents. Ils incluent :root, :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type(), :first-child, :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty,

,

, :nth-child(),

, et

. Chacun de ces pseudo-classes a une fonctionnalité unique qui permet des styles plus précis d'éléments HTML. :nth-child() :nth-child(2) :nth-child(odd) Comment fonctionnent les pseudo-classes? :nth-child(2n 1)

pseudo-classe correspond aux éléments basés sur leur position dans un groupe d'éléments du même niveau. Il accepte un paramètre qui peut être un nombre, un mot-clé ou une formule. Par exemple, :nth-of-type() sélectionnera le deuxième élément enfant de son élément parent, tandis que :nth-child() ou

sélectionnera tous les éléments enfants à nuages ​​impairs.

Quelle est la différence entre :nth-of-type() :nth-child() et :nth-child()? :nth-of-type() li Bien que p et :nth-child() les deux éléments sélectionnent en fonction de leurs positions, ils varient dans la façon dont ils calculent ces positions. :nth-of-type() Traitez tous les éléments comme des frères et sœurs quel que soit leur type, tandis que li ne calcule que des éléments du même type. Par exemple, si vous avez une liste d'éléments p et

,

calculer les deux types d'éléments, tandis que

ne calculera que

ou :first-child des éléments, selon votre élément spécifié. ul li Comment sélectionner et définir le style du premier élément enfant de l'élément parent? ul li:first-child { color: red; }

Pour sélectionner et définir le style du premier élément enfant de l'élément parent, vous pouvez utiliser la pseudo-classe . Par exemple, si vous souhaitez modifier la couleur du premier élément dans , vous pouvez utiliser les CSS suivants: .

:only-child Quelle est la fonction des pseudo-classes?

:only-child pseudo-classe correspond aux éléments qui sont les seuls éléments enfants de son élément parent. Ceci est utile lorsque vous souhaitez uniquement appliquer des styles à un élément lorsqu'il n'a pas d'élément de frère. Par exemple, vous voudrez peut-être ajouter des styles spéciaux aux éléments p que lorsqu'ils sont les seuls éléments enfants de div.

Comment utiliser :empty pseudo-classe?

:empty pseudo-classe correspond à n'importe quel élément sans éléments enfants. Cela comprend des nœuds de texte, des commentaires ou d'autres éléments. Par exemple, vous pouvez l'utiliser pour masquer un div vide, sinon le div prendra de la place sur la page: div:empty { display: none; }.

La pseudo-classe structurelle peut-elle être combinée?

Oui, vous pouvez combiner des pseudo-classes structurelles pour créer des sélecteurs plus spécifiques. Par exemple, vous pouvez combiner :nth-of-type() et :last-child pour sélectionner le dernier type d'élément li dans son élément parent, à condition qu'il soit également le dernier enfant de son élément parent.

Tous les navigateurs soutiennent-ils les pseudo-classes structurelles?

La plupart des navigateurs modernes prennent en charge les pseudo-classes structurelles, mais il peut y avoir des incohérences ou un manque de soutien dans les navigateurs plus âgés. Avant d'utiliser des pseudo-classes spécifiques dans CSS, il est préférable de toujours vérifier le niveau de support actuel sur des sites comme puis-je utiliser.

Les pseudo-classes structurelles peuvent-elles être utilisées avec des pseudo-éléments?

Oui, les pseudo-classes structurelles peuvent être utilisées conjointement avec des pseudo-éléments. Par exemple, vous pouvez utiliser le pseudo-élément ::before avec la pseudo-classe :first-child pour ajouter du contenu avant le premier enfant de l'élément parent.

Comment créer des styles dynamiques en utilisant des pseudo-classes structurelles?

Les pseudo-classes structurelles peuvent être utilisées pour créer des styles dynamiques qui répondent aux structures HTML. Par exemple, vous pouvez utiliser le :nth-child() pseudo-classe avec des formules pour créer une table à imprimé zèbre, ou utiliser la pseudo-classe :hover pour modifier la couleur du lien lorsque vous planez. Les possibilités sont infinies et limitées uniquement par votre créativité.

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!