Le guide définitif des pseudo-classes CSS
Que vous soyez novice ou développeur CSS expérimenté, vous avez probablement entendu parler de pseudo-classes. La pseudo-classe la plus connue est probablement :flotter, ce qui nous permet de styler un élément quand il est en état de vol stationnaire, c'est-à-dire quand un dispositif de pointeur, tel qu'une souris, est pointé dessus.
Suivant le concept de nos précédents articles sur margin: auto et CSS Floats, nous examinons de plus près les pseudo-classes dans cet article. Nous verrons ce que sont vraiment les pseudo-classes, comment ils fonctionnent, comment on peut les catégoriser et en quoi ils sont différents des pseudo-éléments.
Que sont les pseudo-classes?
Une pseudo-classe est un mot clé que nous pouvons ajouter aux sélecteurs CSS afin de définir un état spécial de l'élément HTML appartenant. Nous pouvons ajouter une pseudo-classe à un sélecteur CSS en utilisant le syntaxe du colon : comme ça: a: survol …
Une classe CSS est un attribut que nous pouvons ajouter aux éléments HTML pour lesquels nous souhaitons appliquer les mêmes règles de style, tels que les éléments de menu supérieur ou les titres des widgets de la barre latérale. En d'autres termes, nous pouvons utiliser des classes CSS pour grouper ou classer des éléments HTML qui sont similaires d'une manière ou d'une autre.
Les pseudo-classes leur sont similaires dans le sens où elles sont aussi utilisé pour ajouter des règles de style aux éléments qui partagent la même caractéristique.
Mais alors que les classes authentiques sont défini par l'utilisateur et peut être repéré dans le code source, par exemple le travail des cours réguliers de CSS est de classer ou regrouper des éléments. Les développeurs savent comment leurs éléments doivent être regroupés: ils peuvent former des classes telles que "éléments de menu", "boutons", "vignettes", etc. pour regrouper, puis appliquer un style similaire aux éléments. Ces classifications sont basées sur les caractéristiques des éléments qui sont donné par les développeurs eux-mêmes. Par exemple, si un développeur décide d’utiliser un Les éléments HTML ont cependant leurs propres caractéristiques communes en fonction de leur état, position, nature et interaction avec la page et l'utilisateur. Ce sont les caractéristiques qui sont ne pas généralement marqué dans le code HTML, mais nous pouvons ciblez-les avec des pseudo-classes en CSS, par exemple: Ce sont le genre de caractéristiques généralement ciblées par les pseudo-classes. Pour mieux comprendre la différence entre les classes et les pseudo-classes, supposons que nous utilisions la classe Nous pouvons styler ces derniers éléments enfants avec les CSS suivants: Mais que se passe-t-il lorsque le dernier élément change? Eh bien, nous devrons déplacer le Ce tracas de la mise à jour des classes peut être laissée à l'agent utilisateur, au moins pour les caractéristiques communes aux éléments (et être un dernier élément est aussi courant que possible). Ayant un prédéfini Il existe de nombreux types de pseudo-classes. Elles nous permettent toutes de cibler des éléments en fonction de leurs caractéristiques inaccessibles ou plus difficiles d'accès. Voici une liste des pseudo-classes standard dans MDN. Des pseudo-classes dynamiques sont ajoutées et supprimées des éléments HTML dynamiquement, en fonction de l'état dans lequel ils se transforment en réponse aux interactions de l'utilisateur. Certains exemples de pseudo-classes dynamiques sont Des pseudo-classes basées sur des états sont ajoutées aux éléments quand elles sont dans un état statique particulier. Certains de ses exemples les plus connus sont: La pseudo-classe la plus populaire basée sur l'état doit être Les pseudo-classes structurelles classent les éléments en fonction sur leur position dans la structure du document. Ses exemples les plus courants sont Il existe également diverses pseudo-classes difficiles à classer, telles que: Une des choses les plus difficiles à propos des pseudo-classes est probablement de comprendre la différence entre le Les deux sont des pseudo-classes structurelles, et marque un élément spécifique à l'intérieur d'un élément parent (conteneur), mais d'une manière différente. Assumer n est 2, alors Regardons un exemple. Voyons comment ce style CSS court le HTML dans deux cas différents. Dans le cas 1, le deuxième élément à l'intérieur d'un Mais si l'élément parent Est-ce que avoir un deuxième paragraphe, le Dans notre exemple, le Paragraphe 1, enfant 1 Paragraphe 2, enfant 3 Dans le deuxième cas, nous déplaçons la liste non ordonnée à la troisième place et le deuxième paragraphe le précédera. Cela signifie que les deux Paragraphe 1, enfant 1 Paragraphe 2, enfant 2 Si vous voulez en savoir plus sur les différences entre les Quand on parle de pseudo-classes, il est également important de comprendre en quoi ils diffèrent des pseudo-éléments, afin de ne pas les mélanger. Mais alors que nous utilisons des pseudo-classes pour sélectionner des éléments HTML qui existe dans l'arbre de document tout simplement pas marqués séparément, les pseudo-éléments nous permettent de cibler des éléments qui n'existent pas normalement dans les DOM, soit du tout (par exemple Il y a aussi un différence de syntaxe. Les pseudo-éléments sont généralement identifiés par des doubles points. Cela peut conduire à un cas de confusion, car dans CSS2, les pseudo-éléments étaient également marqués d'un seul signe deux-points - les navigateurs acceptent toujours la syntaxe à deux points pour les pseudo-éléments.. Il existe également des différences entre pseudo-classes et pseudo-éléments dans la façon dont nous pouvons les cibler avec CSS. Les pseudo-éléments ne peuvent apparaître que après la séquence de sélecteurs, alors que les pseudo-classes peuvent être placées n'importe où dans la séquence de sélecteurs CSS. Par exemple, vous pouvez cibler le dernier élément de la liste d’un élément de la liste comme OU La première séquence du sélecteur sélectionne le dernier enfant à l’intérieur du Essayons de faire quelque chose de similaire avec des pseudo-éléments. Le code CSS ci-dessus est valide et le texte "rouge" apparaîtra après la Ce code, par contre, ne fonctionnera pas, comme nous ne peut pas changer la position d'un pseudo-élément dans la séquence du sélecteur. De plus, un seul pseudo-élément peut apparaître à côté d'un sélecteur, alors que les pseudo-classes peuvent être combinés les uns avec les autres si la combinaison a du sens. Par exemple, pour cibler les premiers éléments enfants qui sont également en lecture seule, nous pouvons créer une combinaison des pseudo-classes Un code de sélecteur avec un C'est important de savoir que ceux-ci sont ne pas Pseudo-classes CSS qui sont ciblés par jQuery. Ils sont appelés extensions de sélecteur jQuery. Les extensions de sélecteur jQuery vous permettent cibler des éléments HTML avec des mots-clés plus simples. La plupart d'entre eux sont des combinaisons de plusieurs sélecteurs CSS normaux, représentés par un seul mot clé..But des pseudo-classes
.dernier identifier les derniers éléments dans différents conteneurs parents.
li.last text-transform: majuscule; option.last font-style: italic;
.dernier classe de l'ancien dernier élément à l'élément actuel.:dernier enfant pseudo-classe est très utile en effet. De cette façon, nous ne pas avoir à indiquer le dernier élément dans le code HTML, mais nous pouvons quand même les styler avec le CSS suivant: li: last-child text-transform: majuscule; option: last-child font-style: italic;
Principaux types de pseudo-classes
1. Pseudo-classes dynamiques
:flotter, :concentrer, :lien, et :a visité, qui peuvent tous être ajoutés à la balise d'ancrage. a: visité couleur: # 8D20AE; .button: survol, .button: focus font-weight: bold;
2. Pseudo-classes basées sur l'état
:vérifié qui peut être appliqué pour les cases à cocher ():plein écran pour cibler tout élément actuellement affiché en mode plein écran:désactivée pour les éléments HTML pouvant être en mode désactivé, tels que , , et . :vérifié, quels drapeaux si une case à cocher est cochée ou non. .case à cocher: vérifié + étiquette style de police: italique; entrée: désactivé background-color: #EEEEEE;
3. Pseudo-classes structurelles
:premier enfant, :dernier enfant, et : nième enfant (n) - tous peuvent être utilisés pour cibler un élément enfant spécifique dans un conteneur en fonction de sa position - et :racine qui cible l'élément parent de plus haut niveau dans le DOM. 4. Divers pseudo-classes
: pas (x) qui sélectionne les éléments qui ne correspondent pas au sélecteur x: lang (code de langue) qui sélectionne des éléments dont le contenu est dans une langue spécifique: dir (directionalité) qui sélectionne des éléments avec le contenu d'une directionnalité donnée (de gauche à droite ou de droite à gauche). p: lang (ko) couleur d'arrière-plan: # FFFF00; : root background-color: # FAEBD7;
nième enfant contre nième de type Pseudo-classes
: nième enfant et : nième de type pseudo-classes.: nième d'enfant (n) cible un élément qui est le deuxième enfant de son élément parent, et : nième de type (n) des cibles le deuxième parmi les du même type d'élément (tels que les paragraphes) à l'intérieur d'un élément parent. / * un paragraphe qui est également le deuxième enfant de son élément parent * / p: nth-child (2) color: # 1E90FF; // bleu clair / * le deuxième paragraphe à l'intérieur d'un élément parent * / p: nth-de-type (2) font-weight: bold;
Cas 1
nième enfant (2) la règle ne s'appliquera pas à elle. Bien que ce soit un deuxième enfant, c’est ne pas un paragraphe. nième de type (2) règle s'appliquera, car cette règle ne cherche que le éléments, et ne se soucie pas d'autres les types d'éléments (tels que des listes non ordonnées) à l'intérieur de l'élément parent.nième de type (2) règle va appeler le deuxième paragraphe qui est l'enfant 3.
Liste non ordonnée 1, enfant 2
Cas 2
: nième enfant (2) et le : nième de type (2) les règles seront appliquées, car le deuxième paragraphe est également le deuxième enfant de son parent
Liste non ordonnée 1, enfant 3
: enfant et : nième de type pseudo-classes, CSS Tricks a un excellent post. Si vous utilisez SASS, le fichier Family.scss peut vous aider à créer nième enfantÉléments modifiés.Pseudo-classes vs pseudo-éléments
Pseudo-éléments, tel que ::avant et ::après (voir ce tutoriel sur comment les utiliser) sont également ajouté par les agents utilisateurs, et ils peuvent être ciblés et stylés avec CSS aussi bien, tout comme les pseudo-classes. ::avant et ::après) ou uniquement en tant que parties d'éléments existants (par exemple ::première lettre ou :: espace réservé). ::, alors que les pseudo-classes sont identifiées avec un seul deux-points :.1. Leur place dans la séquence de sélection CSS
ul>: last-child.red color: # B0171F;
ul> .red: last-child color: # B0171F;
.rouge) et le second sélectionne le dernier enfant parmi les éléments possédant le .rouge classe à l'intérieur ul> .red :: after display: block; contenu: 'rouge'; couleur: # B0171F;
articles avec la classe .rouge. ul> :: after.red display: block; contenu: 'rouge'; couleur: # B0171F;
2. Nombre d'occurrences dans une séquence de sélecteur
:premier enfant et :lecture seulement de la manière suivante: : first-child: lecture seule color: #EEEEEE;
Extensions de sélecteur jQuery
: la syntaxe ne constitue pas toujours une pseudo-classe CSS appropriée. Si vous avez déjà utilisé jQuery, vous avez peut-être déjà utilisé bon nombre de ses sélecteurs avec : la syntaxe, par exemple $ (': case à cocher'), $ (': input') et $ (': sélectionné'). / * Modifie la police de tous les éléments HTML liés aux entrées, tels que bouton, sélection et entrée * / $ (": entrée") .css ("famille de polices", "nouveau coursier")
