Pseudo – éléments et pseudo – classes dans CSS

Chaque fois que nous devions changer le style css sur notre site, Tony et moi jouions avec des ciseaux en pierre pour voir qui était le \
CSS contient des fonctionnalités qui simplifient le travail. Aujourd’hui, nous en verrons deux: les pseudo – éléments et les pseudo – sélecteurs. Comment \
Les pseudo – éléments disponibles dans CSS3 sont:: avant: ajouter du contenu avant l’élément:: Avant R: ajouter du contenu après l’élément:: première lettre: Sélectionnez la première lettre de l’élément bloc (c. – à – d. Les éléments dont les attributs d’affichage sont définis comme bloc, bloc en ligne, cellule de table, etc.): Première ligne: Sélectionnez la première ligne de l’élément bloc: Sélection: désigne la partie du document que le visiteur choisit. Comme vous pouvez le voir, les pseudo – éléments sont caractérisés par un cop commençant par
2 points Pia (:). C’est comme ça qu’on les utilise.
Par exemple, lorsque vous sélectionnez une partie d’un document, supposons que vous voulez que la première ligne d’un paragraphe soit orange et soulignée. OK, faites ceci: P:: première ligne {couleur: orange; décoration de texte: Soulignement;} Vous obtiendrez les bons résultats: Lorem ipsum dolor sit amet, concept adipising Elit. Le vestibule du Léo de mollis est situé à turpis interdum, un élément de faretravelit. Nom eget Lacus sed Lacus dictum scelerisque. Proin porta ligula sed mi sempre, vel interdum Massa auctor. Pellentesque et Massa concue, tincidunt erat AC, tincidunt Elit. Sed akdolo metes. Nam commodo metus sed ligula concept interdum. Le conservateur Odio est, ingénieur intérimaire NEC, aliquam du nisl.
Si vous souhaitez modifier la sélection, la méthode est identique. Notez que le nombre d’attributs CSS que nous pouvons éditer est limité à la couleur, l’arrière – plan, le curseur et le contour: P:: select {background: # 21acde; color: White;} En supposant que vous choisissiez ce qui suit, vous pouvez voir les résultats dans les paragraphes suivants: Lorem ipsum dolor sit amet, concept adipising Elit. Le vestibule du Léo de mollis est situé à turpis interdum, un élément de faretravelit. Nom eget Lacus sed Lacus dictum scelerisque. Proin porta ligula sed mi sempre, vel interdum Massa auctor. Pellentesque et Massa concue, tincidunt erat AC, tincidunt Elit. Sed akdolo metes. Nam commodo metus sed ligula concept interdum. Le conservateur Odio est, ingénieur intérimaire NEC, aliquam du nisl.
Créer un nouveau contenu vous pouvez également ajouter dynamiquement du contenu à une page. Par exemple, supposons que vous ayez une liste des éléments suivants:

Un.

2.

3.

En général, la liste est la suivante: un, deux, trois, mais vous pouvez l’éditer de sorte que chaque élément soit séparé de l’élément suivant en utilisant la barre bleue: un, deux, trois faire ce qui suit pour chaque élément de la liste: UL li {display: inline;} UL l
Nous faisons ce genre de choses:
UL li {display: inline;} Sujet du message: Re: Re: Open Sujet du message: Re: Re: Open Comme vous pouvez le voir, tout ce que nous avons fait est d’ajouter une nouvelle règle en utilisant la pseudo – classe: Last Child, qui nous permet de sélectionner le dernier élément li de la liste UL, de cacher son pseudo – élément:: après une fois trouvé, et de définir la propriété Display à none. Caractéristiques particulières de * – enfant et * – de type il existe trois variantes de la pseudoclasse * – enfant:
: le premier élément enfant correspond au premier élément enfant de l’élément (duh!): Le dernier sous – élément fera de même, mais pour ce dernier sous – élément: Nth Child (i), comme vous l’avez deviné, sélectionnez le premier élément (par exemple: Nth Child (2) correspond au deuxième sous – élément), alors regardons et réfléchissons à CSS: Li strong: First Child {color: orange; text Decoration: underscore;} Et les clips HTML suivants:

Lorem

Nombre aléatoire de faux essais
1. Douleur Assieds – toi. Amet.

Lorem

2. Nombre aléatoire de faux essais Douleur Assieds – toi. Amet. Lorem

Nombre aléatoire de faux essais

3. Douleur Assieds – toi. Amet. Qu’est – ce qui va se passer? En principe, il semble que dans les trois cas, le mot ipsum soit orange et souligné parce qu’ipsum est le premier sous – élément puissant de chaque élément Li, n’est – ce pas? Voyons voir:
   Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. C’est assez près. Pouvez – vous deviner pourquoi c’est arrivé? Pseudo – classe: le premier élément enfant est appliqué au premier élément enfant de l’élément. Dans la première phrase, ipsum est le premier marqueur fort et semble être le premier enfant. Dans la deuxième phrase, le premier sous – noeud est em (avec le mot Lorem), suivi d’un marqueur fort avec le mot ipsum. Ce label puissant n’est donc pas \
   De son marqueur parent (EM). Alors, que faire si nous voulons souligner le premier marqueur fort de chaque élément? OK, nous devons utiliser différentes pseudo – classes et nous assurer qu’elles ne correspondent qu’à leurs sous – éléments directs: li > fort: premier élément du type {couleur: orange; décoration de texte: Soulignement;} Comme prévu: Lorem ipsum pain sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. C’est génial, non? De même, cette pseudo – classe a trois variantes: X: le premier de type correspond au premier frère du type X: le dernier de type sélectionne le dernier X: Nth de type (i) correspond au premier frère du type X et sélectionne l’inverse: non final, la pseudo – classe dont je voudrais vous parler Aujourd’hui est: Non Non est une pseudo – classe qui correspond à des éléments qui ne satisfont pas à un attribut. Par exemple, revenons à l’exemple précédent: un, deux, trois pour résoudre le problème du diagramme à barres dans le dernier élément, nous avons essentiellement (1) ajouté le diagramme à barres à tous les éléments Li, (2) écrasé la règle dans le dernier élément et l’avons cachée: UL li {display: inline;} Sujet du message: Re: Re: Open Sujet du message: Re: Re: Open Mais ça n’a pas l’air bien, n’est – ce pas? Nous surmontons le premier tule, donc nous devons corriger notre style dans le dernier élément. Ce que nous voulons vraiment, c’est ajouter des barres à tous les projets sauf le dernier… OK, nous pouvons le faire en appliquant la pseudo – classe: not et en la combinant avec: Last Child: UL li {display: inline;} Sujet du poste: Re: Re: turn me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me me Il applique le style à tous les éléments Li qui ne sont pas le dernier élément (: Not (: Last Child)), ce qui décrit parfaitement notre objectif et résout donc notre problème: un, deux, trois en bref, les pseudo – éléments et les pseudo – classes CSS nous permettent d’être très précis
   Lorsque nous visitons les différents éléments de notre site. Grâce à eux, nous pouvons écrire des règles CSS plus concises et plus spécifiques, ce qui simplifie la maintenance et évite la possibilité de devoir constamment couvrir des règles communes dans des situations spécifiques. J’espère que vous aimez cet article, si vous l’aimez, s’il vous plaît partager avec vos amis! Jfl featured pictures on unsplash.