sushiandbox.ru Mastering PC - Internet. Skype. Réseaux sociaux. Cours sur Windows.
Bonjour chers lecteurs ! Poursuivant le thème des sélecteurs CSS, je souhaite attirer votre attention description des sélecteurs d'enfant et de contexte, ainsi que leur analyse comparative, car selon la logique d'application, ils sont très similaires, bien qu'ils présentent certaines différences.
Dans mes publications, je me suis attardé en détail sur divers types de CSS sélecteurs : ; aussi bien que . Au fait, dans le dernier article, où ils ont compris différents types sélecteur d'attributs, j'ai décrit en détail comment mes calculs théoriques peuvent être immédiatement vérifiés en apportant des modifications au code HTML et CSS en ligne à l'aide de l'outil intégré Google Chrome(). Ces outils d'édition ont les dernières modifications de tous les navigateurs populaires, y compris le plugin Firebug pour Firefox ().
Vous pouvez également étudier le matériel théorique de ce post en éditant n'importe quelle page de n'importe quel site ! Pour cela, appuyez simplement sur F12 si vous utilisez Google Chrome ou MozillaFirefox(). Et maintenant je vais vous présenter le contenu de la balise p, sur l'exemple de laquelle nous allons étudier sélecteurs CSS enfant et contexte:
Ce paragraphe comprend em et balises de formatage fort, qui mettent en surbrillance le texte audacieux et en italique.
À l'aide de l'outil d'édition décrit ci-dessus, j'ai inséré ce paragraphe directement dans cet article en tapant le texte approprié dans la partie gauche de la fenêtre d'édition, à la suite de quoi le texte de ce paragraphe est apparu tout en haut de la page :
Cette construction HTML , . Ce paragraphe sera expérimental dans la publication d'aujourd'hui, en utilisant son exemple, je montrerai comment la conception de son texte change, en fonction des sélecteurs - enfant ou contexte - utilisés dans la règle CSS.
Un enfant est un élément situé directement à l'intérieur de l'élément parent.. Avant de passer directement au sujet, je vais donner une image qui reflète la hiérarchie des balises dans Document HTML sur l'exemple du paragraphe dont le texte est donné ci-dessus et que nous analyserons aujourd'hui :
Cette conception est également appelée arbre d'éléments. Cette figure montre bien l'imbrication des conteneurs, ce qui implique une relation hiérarchique entre les balises. La balise de paragraphe p est un enfant de la relation . En même temps, la balise strong n'est pas un enfant de la div, puisqu'elle est située dans le conteneur p.
Sélecteur CSS enfant
Le sélecteur enfant dans l'arborescence des éléments est toujours directement à l'intérieur de l'élément parent, dans ce cas la syntaxe pour écrire un sélecteur CSS est la suivante :
Le style sera appliqué au sélecteur 2, mais uniquement s'il s'agit d'un enfant du sélecteur 1. Regardons de plus près en utilisant la capture d'écran ci-dessus avec l'arborescence des éléments. Par exemple, en suivant la syntaxe, vous pouvez définir la règle suivante :
P> em (couleur : vert ;)
Cette règle affectera le dernier mot du paragraphe en "italique" car c'est ce qui est enfermé entre les balises em d'ouverture et de fermeture. La balise em est un enfant de p car elle est placée directement à l'intérieur de celle-ci, de sorte que le texte du contenu, à savoir le mot "italique", sera coloré en vert.
Cependant, l'autre balise em n'est pas un enfant direct de la balise p, car elle fait partie de la balise strong, de sorte que la partie « em et balises de formatage fort » du paragraphe ne sera pas colorée.
Sélecteur CSS contextuel
Il est temps de comprendre qu'est-ce que le sélecteur de contexte CSS. Lors de la mise en page d'une page particulière du site, les balises sont très souvent imbriquées les unes dans les autres. Pour que les styles de ces éléments fonctionnent correctement, des sélecteurs sont utilisés qui agissent dans un certain contexte, d'où le nom.
Si pour que la règle CSS soit appliquée, le sélecteur enfant doit nécessairement être situé directement à l'intérieur de l'élément parent (premier niveau d'imbrication), alors pour le sélecteur de contexte, cela n'a aucune importance et n'importe quel niveau d'imbrication peut être appliqué, de toute façon, l'élément les propriétés seront transférées du parent. La syntaxe est donc :
Comme vous pouvez le voir, le sélecteur de contexte se compose de simples sélecteurs séparés par un espace. Pour les sélecteurs contextuels, il est permis d'utiliser deux balises imbriquées ou plus. Composons maintenant la règle CSS pour le paragraphe sous test, que j'ai cité ci-dessus :
P'em (couleur : vert ;)
Comme vous pouvez le voir, non seulement le texte de la partie du contenu du paragraphe, qui est directement enfermé dans la balise de formatage em, c'est-à-dire le mot "italique", est coloré en vert, mais aussi le texte d'une autre balise em , qui fait également partie de la balise strong. Cela s'est produit parce que la règle avec le sélecteur de contexte est en vigueur, pour laquelle le niveau d'imbrication n'est pas important, contrairement au sélecteur enfant. C'est la différence fondamentale entre les sélecteurs d'enfant et de contexte.
Examinons un autre exemple de l'interaction des sélecteurs de contexte et d'enfant avec notre paragraphe. Écrivons les règles CSS suivantes pour les sélecteurs d'enfant et de contexte :
Div em (couleur : rouge ;) p > em (couleur : vert ;)
Après cela, notre paragraphe prend le format suivant :
Comme vous pouvez le voir, le morceau de texte enfermé dans les balises em et strong est coloré en rouge parce que la règle de sélection contextuelle est vraie pour lui, c'est-à-dire que la balise em est enfermée dans les conteneurs strong et div, et le niveau d'imbrication, comme déjà noté, n'a pas d'importance .
La question se pose : pourquoi le mot « italique », qui est aussi le contenu de em, est-il coloré en vert ? Après tout, la règle du sélecteur de contexte est également pertinente pour lui. Mais la règle du sélecteur enfant s'applique également à cette partie du texte du paragraphe, car elle ne contredit pas la condition selon laquelle, pour le sélecteur enfant, l'élément doit se trouver directement dans la balise p.
Le fait est que CSS a une loi de priorité pour les propriétés CSS ci-dessous. Autrement dit, dans ce cas, la règle du sélecteur enfant est inférieure dans le document aux styles CSS spécifiés pour le sélecteur contextuel du conteneur div. Par conséquent, le mot "italique" est vert. Si vous les échangez, la règle « p> em (couleur : vert ;) » cesse de fonctionner et la section « italique » du texte sera rouge.
L'objectif principal de ce sélecteur découle de son nom et est de faire référence à l'élément enfant. Affiché à l'aide du signe élémentaire ">", qui relie l'élément enfant à l'élément parent. Il convient également de noter que des sélecteurs simples sont utilisés en circulation. A titre d'exemple, considérons l'encodage suivant :
Élément > ul ( padding-top : 20px ; )
Cet encodage signifie que la liste imbriquée dans l'élément aura un remplissage intérieur de 20 pixels à partir du haut. La présence du signe ">" dans cette entrée indique que la règle ne s'appliquera qu'aux listes du premier niveau d'imbrication.
Une analyse détaillée du fonctionnement du sélecteur enfant
Le sélecteur d'élément enfant a des propriétés similaires au sélecteur enfant. Cependant, il y a une fonctionnalité qui montre différence fondamentale données de transaction. Elle réside dans le fait que l'influence du sélecteur descendant s'étend à absolument tous les éléments, tandis que le sélecteur fils subordonne les styles des positions du premier niveau de classifications.
L'exemple suivant vous aidera à mieux comprendre le travail de l'opérateur du sélecteur enfant :
Div > p ( couleur : #ff0000; /* rouge */ )
< div> Ligne donnée sera par défaut en texte noir.< span>Cette ligne est recolorée en rouge car p est une balise enfant pour la div. < p>Encore une fois, nous voyons des lettres noires.< span>Ici, nous voyons également des symboles noirs, car la balise p est le parent de cette étendue.
Cet exemple confirme le fonctionnement de l'opérateur sélecteur enfant en fonction du degré d'imbrication.
Restriction pour l'application de l'opérateur de sélecteur enfant
Il est à noter que cette opération pris en charge par tous les navigateurs sauf légendaire Internet Explorer 6. Je pense que peu de gens utilisent ce navigateur, mais s'il y en a des uniques, alors il y a une issue pour eux, qui sera décrite dans un article séparé.
Pourquoi est-il utilisé
Les programmeurs se réfèrent aux sélecteurs d'éléments enfants lorsqu'ils doivent attribuer leur propre style unique aux éléments imbriqués. De plus, l'utilisation de ce sélecteur peut réduire la quantité de CSS, ce qui améliorera la lisibilité du document. Comme le montre la pratique, cette opération est le plus souvent utilisée lors de la création de menus déroulants.
De plus, le sélecteur d'élément enfant est utilisé pour attribuer des styles uniques aux éléments dont les parents sont déjà connus à l'avance. Autrement dit:
Principal > en-tête( /* le style ne s'applique qu'à l'en-tête principal */ }
Cet exemple est valable dans les cas où la balise header est utilisée pour mettre en évidence les titres des articles. Dans notre cas, nous définissons la conception uniquement pour l'en-tête principal et ne touchons pas les secondaires. Cette technique évite également l'utilisation d'identifiants inutiles, ce qui allège le poids du fichier CSS et le rend plus lisible.
Résumé
Ainsi, l'opérateur d'élément enfant peut être utilisé non seulement pour concevoir des menus déroulants, mais également pour optimiser légèrement votre ressource Internet pour le travail des robots de recherche.
Les sélecteurs enfants CSS 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 enfants, les sélecteurs enfants sont des sélecteurs composés constitués de sélecteurs simples (classes, identifiants, etc.).
Et encore une fois, si vous avez oublié ce que sont les éléments enfants, rappelons-le en examinant un exemple que vous connaissez déjà.
<тег1> <тег2>... <тег3><тег4>...
Un élément est dit enfant d'un autre élément s'il se trouve à l'intérieur de celui-ci au premier niveau d'imbrication. Dans notre exemple<тег2>et<тег3>sont des filles<тег1>, un<тег4>- c'est la fille<тег3> .
Les sélecteurs enfants consistent en deux ou plusieurs sélecteurs simples séparés par ">", où le parent est répertorié en premier, puis son enfant, puis l'enfant de cet enfant, et ainsi de suite. Autrement dit, comme dans les sélecteurs descendants, le chemin à travers l'arborescence du document est spécifié. Les styles ne seront appliqués qu'aux éléments dont les sélecteurs sont les derniers dans la liste. Syntaxe générale :
sélecteur1 > sélecteur2 (
Les espaces des deux côtés du signe ">" peuvent être inclus ou non, selon les besoins.
Un exemple d'utilisation de sélecteurs enfants CSS
Paragraphe 1.
Paragraphe 2.
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 seuls deux d'entre eux ont des bordures, un rembourrage et des marges. Pourquoi? Et le deuxième point. Seul le premier paragraphe a du texte bleu.
Internet Explorer 6.0 ne comprend pas les sélecteurs enfants, donc si vous concevez 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 non débutants) dans la création de sites rencontrent certains problèmes lors de l'utilisation de sélecteurs enfants dans des tableaux HTML. Pour que vous compreniez ce que Dans la question, regardons une telle table ordinaire.
| Cellule 1.1 | Cellule 1.2 |
| Cellule 2.1 | Cellule 2.2 |
Et maintenant la question. Que feriez-vous si vous aviez besoin d'utiliser des sélecteurs enfants pour passer de la balise aux cellules ? 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 autre élément - qui, même s'il n'est pas explicitement spécifié, 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, Tutoriel HTML nous ne l'avons pas parcouru, car en réalité son indication explicite est rarement nécessaire. Eh bien, je pense que vous avez déjà deviné quelle sera la bonne entrée, mais je vais quand même vous montrer.
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, mais il existe également de tels éléments. C'est juste qu'en pratique, les "problèmes d'oubli" surviennent le plus souvent avec les tables, c'est pourquoi j'ai attiré votre attention là-dessus.
Devoirs.
- Définissez la police de la page sur Arial avec une taille de 0,9 em et un arrière-plan.
- Écrivez plusieurs titres et paragraphes sur la page, modifiez la taille et la couleur du texte du titre comme bon vous semble.
- Faites les liens directement dans les paragraphes de la page en bleu sans les souligner. Mais en même temps, si les liens sont en outre encadrés avec une balise, par exemple, pour les italiques, ils doivent déjà être affichés avec un soulignement et une couleur rouge. Encore une fois, j'attire votre attention sur le fait qu'il n'est pas nécessaire de prescrire des styles de lien avec chaque balise de cadrage séparément, faites-le universellement. Comment? Pense.
- 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 autres propriétés qui l'accompagnent, 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 aussi, lors du défilement, ne pas ramper sur le contenu de la page.
Je pense que le dernier point de la leçon sera le plus difficile pour vous, mais n'essayez pas de vous immerger immédiatement complètement dans le développement du positionnement. Faites juste vos devoirs. Soit dit en passant, cet élément ne fonctionnera pas dans Internet Explorer 6.0, car le vieil homme ne comprend pas le positionnement fixe.
Vlad Merjevitch
Un élément enfant est un élément qui se trouve directement à l'intérieur de l'élément parent. Pour mieux comprendre les relations entre les éléments du document, décomposons un peu de code (Exemple 12.1).
Exemple 12.1. Imbriquer des éléments dans un document
HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Dans cet exemple, plusieurs conteneurs sont utilisés, qui sont situés les uns dans les autres dans le code. Cela se voit plus clairement dans l'arborescence des éléments, c'est le nom de la structure des relations entre les balises du document (Fig. 12.1).
Riz. 12.1. Arbre d'éléments pour un exemple
Sur la fig. 12.1 sous une forme pratique, l'imbrication des éléments et leur hiérarchie sont présentés. Ici en tant qu'enfant de la balise
Cependant, la balise n'est pas un enfant d'une balise Revenons aux sélecteurs. Un sélecteur enfant est celui qui se trouve directement à l'intérieur de l'élément parent dans l'arborescence des éléments. La syntaxe d'utilisation de ces sélecteurs est la suivante. Sélecteur 1 > Sélecteur 2 ( Description des règles de style ) Le style est appliqué au sélecteur 2, mais uniquement s'il s'agit d'un enfant du sélecteur 1. En se référant à nouveau à l'exemple 12-1, le style P > EM ( color: red ) serait défini pour le premier paragraphe du document, car la balise est à l'intérieur du conteneur Et ne donnera aucun résultat pour le deuxième paragraphe. Et tout ça parce que le tag au deuxième alinéa se trouve dans le conteneur , donc la condition d'imbrication est violée. Dans leur logique, les sélecteurs enfants sont similaires aux sélecteurs de contexte. La différence entre eux est la suivante. Un sélecteur d'enfant n'est stylisé que lorsqu'il s'agit d'un enfant direct, en d'autres termes, directement dans l'élément parent. Pour un sélecteur de contexte, n'importe quel niveau d'imbrication est autorisé. Pour bien comprendre ce dont il s'agit, analysons le code suivant (exemple 12.2). Exemple 12.2. Sélecteurs contextuels et enfants HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Le résultat de cet exemple est montré sur la Fig. 12.2. Riz. 12.2. Couleur du texte définie avec le sélecteur enfant Par balise dans l'exemple, deux règles fonctionnent simultanément : sélecteur de contexte (balise situé à l'intérieur ). Dans le même temps, les règles sont équivalentes, puisque toutes leurs conditions sont remplies et ne se contredisent pas. Dans de tels cas, le style est appliqué, qui se trouve dans le code ci-dessous, de sorte que le texte en italique s'affiche en rouge. Dès que les règles sont inversées et mises DIV I en dessous, la couleur du texte passera du rouge au vert. Notez que dans la plupart des cas, l'ajout de sélecteurs enfants peut être omis en les remplaçant par des sélecteurs de contexte. Cependant, l'utilisation de sélecteurs enfants vous donne plus de contrôle sur les styles d'éléments, ce qui vous permet finalement d'obtenir le résultat souhaité, ainsi qu'un code simple et descriptif. Il est plus pratique d'utiliser ces sélecteurs pour les éléments qui ont une structure hiérarchique - cela inclut, par exemple, les tableaux et diverses listes. L'exemple 12-3 montre comment modifier l'apparence d'une liste à l'aide de styles. En imbriquant une liste dans une autre, on obtient une sorte de menu. Les titres sont disposés horizontalement, tandis que l'ensemble des liens est placé verticalement sous les titres (Figure 12.3). Riz. 12.3. Liste des menus Pour positionner le texte horizontalement, la propriété de style flottant est ajoutée au sélecteur LI. Afin de séparer le style des listes horizontales et verticales, des sélecteurs enfants sont utilisés (exemple 12.3). Exemple 12.3. Utilisation des sélecteurs enfants HTML5 CSS 2.1 IE Cr Op Sa Fx
Dans cet exemple, les sélecteurs enfants doivent séparer le style des éléments de liste de niveau supérieur et des listes imbriquées qui effectuent différentes tâches, de sorte que leur style ne doit pas se chevaucher. 1. De quelle couleur sera le gras ? texte cursif dans du code Les normes d'éclairage sont basées sur base de classification des oeuvres visuelles pour certaines raisons quantitatives. Lorsque vous utilisez le style suivant ? P (couleur : vert ; ) 2. Quel élément est le parent de la balise 
Questions à vérifier
B (couleur : bleu ; )
Je (couleur : orange ; )
B > I ( couleur : olive ; )
P > I (couleur : jaune ; )