Sélecteurs enfants. Sélecteurs css enfants et contextuels css select éléments enfants

Premier enfant

Deuxième enfant

Troisième enfant

Dernier enfant

,

La première règle - p : first-child - traite de l'élément p : s'il est le premier enfant de son parent, puis le style lui est appliqué (dans notre cas, il est en gras et convertit le texte en majuscule). Si dans le code HTML donné immédiatement après la balise d'ouverture

Pour définir le style des éléments impairs, la valeur "impair" est passée au sélecteur :

Tr : nième enfant (impair) ()

Pour styliser les éléments pairs, la valeur « pair » est transmise au sélecteur :

Tr : nième enfant (pair) ()

On peut aussi passer le numéro de l'élément à styliser à ce sélecteur :

Tr : nième enfant (3) (couleur d'arrière-plan : #bbb ;)

Dans ce cas, la troisième ligne est stylisée.

Une autre possibilité consiste à utiliser un espace réservé pour le numéro, qui est exprimé par la lettre n :

Tr : nième enfant (2n + 1) (couleur d'arrière-plan : #bbb ;)

Ici, le style est appliqué à chaque deuxième ligne impaire.

Le nombre avant n (dans ce cas 2) représente le prochain enfant à mettre en évidence. Le nombre qui suit le signe plus indique à partir de quel élément commencer la sélection, c'est-à-dire que +1 signifie commencer à partir du premier élément enfant.

Ainsi, dans ce cas, la sélection commence à partir du 1er élément, et le suivant est 2 * 1 + 1 = 3ème élément, puis 2 * 2 + 1 = 5ème élément, et ainsi de suite.

Par exemple, si nous voulons sélectionner chaque troisième élément, en commençant par le deuxième, nous pourrions écrire :

Tr : nième enfant (3n + 2) (couleur d'arrière-plan : #bbb ;)

La pseudo-classe : nth-last-child fournit essentiellement la même fonctionnalité, sauf que les éléments ne sont pas comptés depuis le début, mais depuis la fin :

Tr : nième-dernier-enfant (2) (couleur d'arrière-plan : #bbb; / * à 2 lignes de la fin, c'est-à-dire l'avant-dernière * /) tr : nième-dernier-enfant (2n + 1) (couleur d'arrière-plan : #eee ; / * lignes impaires commençant par la fin * /)

Pseudo-classe de type N

La pseudo-classe : nth-of-type vous permet de sélectionner un enfant d'un type spécifique par un numéro spécifique :

Tr : nième de type (2) (couleur d'arrière-plan : #bbb ;)

La pseudo-classe nth-last-of-type fonctionne de la même manière, seulement maintenant les éléments sont comptés à partir de la fin :

Tr : nième-dernier-type (2n) (couleur d'arrière-plan : #bbb ;)

• La tâche en cours est la sélection des enfants.
• Désignation - chaînage : sélecteur parent simple, combinateur ">", sélecteur enfant simple.
• Exemple d'utilisation :

Fixons l'indentation gauche pour la liste directement imbriquée dans l'élément avec la classe de contenu (ces règles n'affecteront pas les listes du deuxième niveau d'imbrication) :

Contenu> ul (marge à gauche : 20px ;)

En savoir plus sur le sélecteur d'enfants

La principale différence entre le sélecteur enfant et celui évoqué plus haut réside dans le fait que si le sélecteur enfant sélectionne tous les descendants, quel que soit le niveau d'imbrication, alors le sélecteur enfant sélectionne uniquement les descendants de premier niveau, c'est-à-dire les éléments directement imbriqués. Par exemple, écrivons ceci :

Div> span (couleur : # 555; / * gris * /)

... et ce code :

Les sélecteurs CSS enfants sont des sélecteurs utilisés pour appliquer des styles aux éléments uniquement lorsqu'ils sont enfants d'autres éléments (parents). Comme les sélecteurs descendants, les sélecteurs enfants sont composites et sont constitués de sélecteurs simples (classes, identifiants, etc.).

Encore une fois, si vous avez oublié ce que sont les éléments enfants, souvenons-nous en analysant un exemple qui vous est déjà familier.

<тег1> <тег2>... <тег3><тег4>...

Un élément est appelé enfant d'un autre élément s'il se trouve à l'intérieur au premier niveau d'imbrication. Dans notre exemple<тег2>et<тег3>sont des filles<тег1>, une<тег4>- c'est une fille<тег3> .

Les sélecteurs d'enfants consistent en deux ou plusieurs sélecteurs simples séparés par ">", où le parent est indiqué en premier, puis son enfant, puis l'enfant de cet enfant, et ainsi de suite. C'est-à-dire que, comme dans les sélecteurs descendants, le chemin pour traverser l'arborescence du document est défini. Les styles seront appliqués uniquement aux éléments dont les sélecteurs sont les derniers de la liste. Syntaxe générale :

sélecteur1> sélecteur2 (

Les espaces des deux côtés du signe « > » peuvent être utilisés ou non, si vous le souhaitez.

Exemple d'utilisation de sélecteurs d'enfants CSS

Résultat dans le navigateur

Paragraphe 1.

Paragraphe 2.

Dans cet exemple, vous devez faire attention à deux points. Il y a trois éléments ici, mais seulement deux d'entre eux ont des bordures, un remplissage et des marges. Pourquoi? Et le deuxième point. Seul le premier paragraphe a une couleur de texte bleue.

Internet Explorer 6.0 ne comprend pas les sélecteurs d'enfants, donc si vous construisez votre site avec cet ancien navigateur à l'esprit, gardez cela à l'esprit.

Sélecteurs enfants dans les tableaux HTML

De nombreux débutants (et parfois plus novices) dans la création de sites Web sont confrontés à certains problèmes lors de l'utilisation de sélecteurs d'enfants dans les tableaux HTML. Pour que vous compreniez ce que Dans la question, jetons un coup d'œil à une telle table commune.

Et maintenant une question. Que faites-vous si vous devez naviguer d'une balise vers des cellules à l'aide de sélecteurs enfants ? Si vous décidez d'écrire comme ceci, alors c'est faux :

tableau> tr> td ( valeur de la propriété; valeur de la propriété; ...)

Pouvez-vous deviner pourquoi c'est faux? Pas? Le fait est que vous avez oublié un élément de plus - qui, même s'il n'est pas spécifié explicitement, est toujours présent de manière invisible dans chaque tableau HTML. Il n'a tout simplement pas les balises d'ouverture et de fermeture requises, il est donc souvent négligé. D'ailleurs, oui, dans Tutoriel HTML nous ne l'avons pas parcouru avec vous, car en réalité son indication explicite est rarement nécessaire. Eh bien, je pense que vous avez déjà deviné ce que ce sera entrée correcte, mais je vais vous montrer tout de même.

table> tbody> tr> td ( valeur de la propriété; valeur de la propriété; ...)

Soit dit en passant, non seulement les tableaux ont des éléments avec des balises d'ouverture facultatives, il existe également de tels éléments. C'est juste qu'en pratique les "problèmes d'oubli" se posent le plus souvent avec les tableaux, c'est pourquoi j'ai attiré votre attention sur ce point.

Devoirs.

1. Installez la police Arial 0.9em et un arrière-plan sur la page.
2. Écrivez des titres et des paragraphes sur la page, modifiez la taille et la couleur du texte du titre comme bon vous semble.
3. Faites les liens directement dans les paragraphes de la page en bleu sans souligner. Mais en même temps, si les liens sont en plus encadrés avec n'importe quelle balise, par exemple, pour l'italique, alors ils devraient déjà être affichés avec un soulignement et du rouge. Encore une fois, j'attire votre attention sur le fait que vous n'avez pas besoin d'écrire des styles de lien avec chaque balise de cadrage séparément, faites-le de manière universelle. Comment? Pensez-y.
4. Créez un petit menu sur le côté droit de la page et corrigez-le, pour cela, vous avez besoin d'une propriété et de quelques propriétés connexes, vous le comprendrez là-bas. Dans le même temps, laissez le menu non seulement rester en place dans la fenêtre du navigateur, mais également ne pas parcourir le contenu de la page lors du défilement.

Je pense que le dernier point de la leçon sera le plus difficile pour vous, mais n'essayez pas de vous immerger complètement dans la maîtrise du positionnement tout de suite. Fais juste tes devoirs. À propos, cet élément ne fonctionnera pas dans Internet Explorer 6.0, car le vieil homme ne comprend pas le positionnement fixe.