Les pseudo-éléments et les pseudo-classes sont définis en ajoutant un mot-clé spécifique après le sélecteur, en suivant des règles de syntaxe similaires et en définissant les styles correspondants dans les blocs de règles CSS. Les pseudo-éléments peuvent ajouter ou remplacer du contenu via l'attribut content. Par exemple, :before et :after peuvent insérer du texte, des images ou tout autre contenu généré. Les pseudo-classes affectent uniquement le style d'un élément, mais n'ajoutent ni ne modifient le contenu. Ils modifient le comportement des éléments en fonction de l'interaction de l'utilisateur, de la structure du document ou d'autres conditions logiques. Les principales différences sont les suivantes :
Objets cibles :
Les sélecteurs de pseudo-classes (Pseudo-classes) agissent sur des éléments existants réels et sont utilisés pour décrire un statut ou une relation spécifique de l'élément, comme le statut d'accès du lien ( :visited ), le statut de survol de la souris ( :hover ), et s'il s'agit d'un document le premier élément enfant dans ( :first-child ), etc. Ils ne modifient pas directement la structure de l'élément, mais affectent la façon dont l'élément se comporte dans des conditions spécifiques. Les sélecteurs de pseudo-éléments sont utilisés pour créer et sélectionner une partie spécifique au sein d'un élément ou pour générer de nouveaux nœuds de contenu virtuels avant et après un élément. Par exemple, :before et :after peuvent être utilisés pour insérer du contenu supplémentaire, :first-line et :first-letter sélectionnent respectivement la première ligne de texte et la première lettre de l'élément, :marker contrôle le style de marquage de l'élément de liste, etc. . Ces pseudo-éléments ne correspondent pas aux éléments réels du document HTML, mais des styles peuvent leur être appliqués comme s'il s'agissait de véritables parties du document.
Identifiant grammatical :
Les pseudo-classes sont généralement identifiées par deux points : :), comme :hover , :focus . Les pseudo-éléments sont identifiés en CSS3 par deux deux-points consécutifs ( :: ) pour les distinguer des pseudo-classes des anciennes versions de CSS. Bien que la plupart des navigateurs modernes acceptent encore les deux-points pour représenter les pseudo-éléments (tels que :before ), afin de se conformer aux normes du W3C et de maintenir les meilleures pratiques, il est recommandé d'utiliser des formes doubles deux-points, telles que ::before , ::after .
Réutilisabilité :
Les pseudo-classes peuvent être combinées dans le même sélecteur, comme a:hover:focus pour représenter un lien à la fois survolé et focalisé. Les pseudo-éléments ne peuvent généralement pas apparaître de manière répétée dans le même sélecteur car ils représentent une partie spécifique de l'élément ou un nouveau contenu généré. Un élément ne peut avoir qu'un seul pseudo-élément :before ou :after actif en même temps.
Les pseudo-éléments CSS3 sont des sélecteurs CSS spéciaux qui permettent aux développeurs d'ajouter ou de modifier les styles de parties spécifiques d'un élément via CSS sans modifier la structure HTML, ou de générer et contrôler du contenu virtuel à l'intérieur ou à l'extérieur de l'élément. Ce qui suit est une explication détaillée et des exemples d'application de plusieurs pseudo-éléments CSS3 courants :
1. :before et :after
:before et :after créent chacun un nouvel "élément enfant" invisible et sans contenu après la zone de contenu de l'élément sélectionné. Ensuite, en définissant des styles (tels que le contenu, la taille, la couleur, l'arrière-plan, etc.) sur ce pseudo-élément, il devient visible et apparaît visuellement comme la partie qui suit immédiatement le contenu de l'élément d'origine. Ces contenus sont définis par content et des styles supplémentaires peuvent être appliqués.
grammaire :
sélecteur:avant {
contenu : "..." /* ou autre valeur */;
/* Autres déclarations de style */
}
sélecteur :après {
contenu : "..." /* ou autre valeur */;
/* Autres déclarations de style */
} Parmi eux, l'attribut content est la clé pour définir le contenu généré par les pseudo-éléments. Il peut accepter les valeurs suivantes :
String : Spécifiez directement le texte à afficher. Entités HTML entourées de guillemets : telles que content: "—"; ; URL : Insérez des ressources d'image, telles que content: url(image.png); Générer des mots-clés de contenu : tels que content: counter(name); (counter) ou content: attr(attribute-name); (obtenir la valeur de l'attribut de l'élément).
Exemples d'applications :
1.1. Ajouter du contenu décoratif
Ajoutez des citations, des icônes ou d’autres éléments décoratifs.
Ajouter des guillemets :
blockquote:avant {
contenu : citation ouverte ;
taille de police : plus grande ;
couleur : #666 ;
}
blockquote : après {
contenu : citation fermée ;
}Ajoutez des icônes personnalisées avant/après les éléments de liste :
li:avant {
contenu : url(icon-checkmark.svg) ;
marge droite : 0,5em ;
}
li.completed:après {
contenu : "2713" ; /* Caractère Unicode : coche */
couleur : vert ;
taille de police : 1,5em ;
alignement vertical : super ;
}1.2. Effacer le flotteur
:after est souvent utilisé pour créer un élément vide au niveau du bloc, et est utilisé avec clear:both pour effacer l'impact du flottement sur les éléments suivants et éviter le problème de "l'effondrement de la hauteur".
.clearfix : après {
contenu: "";
affichage : tableau ;
clair : les deux ;
} Appliquez la classe .clearfix aux éléments conteneurs dont les flotteurs internes doivent être effacés.
1.3. Remplacer ou étendre le contenu HTML
À l'aide de la fonction attr() , vous pouvez extraire la valeur de l'attribut de l'élément en tant que contenu de :after pour obtenir un affichage de texte dynamique.
abbr[titre] :après {
contenu : " (" attr(titre) ")" ;
taille de police : plus petite ;
couleur : gris ;
} Dans cet exemple, lorsque la souris passe sur l'élément abbr avec l'attribut title , une petite parenthèse grise contenant la valeur de title sera affichée.
1.4. Implémenter des formes et des animations complexes
Combiné avec content , background , border et d'autres propriétés ainsi qu'avec CSS3 transform , transition ou animation , vous pouvez utiliser :after pour créer des formes complexes et des effets d'animation.
.bouton :après {
contenu: "";
affichage : bloc en ligne ;
largeur : 0 ;
hauteur : 0 ;
bordure supérieure : ⅓em solide transparent ;
bordure droite : ⅓em solide transparent ;
bordure inférieure : ⅓em solide #007BFF ;
bordure gauche : ⅓em solide transparent ;
marge gauche : 0,½em ;
}
.button:survol:après {
transformer : traduireY(-0,1em);
transition : transformation facile en 0,2 s ;
} Le code ci-dessus crée une flèche déroulante triangulaire après l'élément .button et implémente une animation fluide vers le bas au survol de la souris.
Choses à noter
:after doit être utilisé avec l’attribut content , sinon il n’aura aucun effet. Puisque :after est un élément virtuel créé, les opérations DOM ne peuvent pas être effectuées via JavaScript. Bien que le contenu généré par :after puisse participer à la mise en page, il n'est pas inclus dans le DOM, n'affecte pas la sémantique et n'affecte pas les fonctions d'accessibilité telles que la navigation au clavier.
En résumé, les sélecteurs de pseudo-éléments CSS3 enrichissent considérablement l'expressivité de la conception Web en insérant du contenu personnalisé après le contenu des éléments sans modifier la structure HTML. Une utilisation compétente des pseudo-éléments et d'autres techniques CSS peut aider les développeurs à créer des interfaces Web plus belles, plus réactives et plus faciles à entretenir.
2. :first-line et :first-letter
Le sélecteur de pseudo-élément :first-line est utilisé pour styliser la première ligne de texte dans l'élément, tandis que le pseudo-élément :first-letter est utilisé pour styliser la première lettre dans l'élément.
grammaire :
sélecteur:première ligne {
/* Déclaration de style */
}
sélecteur:première lettre {
/* Déclaration de style */
}Exemples d'applications :
Retrait de la première ligne :
article p:première ligne {
retrait du texte : 2em ;
}Capitalisation et décoration :
article h2:première lettre {
taille de police : 2em ;
flotteur : gauche ;
marge droite : 0,5em ;
hauteur de ligne : 0,8 ;
couleur : #8A2BE2 ;
couleur d'arrière-plan : #F8F8FF ;
rembourrage : 0,⅔em 0,⅓em ;
rayon de bordure : 0,5 em ;
}Le sélecteur de pseudo-classe CSS3 est un outil puissant qui permet aux développeurs de positionner et d'appliquer avec précision des styles en fonction de l'état d'un élément plutôt que de sa position dans l'arborescence du document ou d'attributs inhérents tels que la classe et l'ID. Ces sélecteurs utilisent des structures syntaxiques spéciales pour décrire différents états conditionnels des éléments, tels que l'interaction de l'utilisateur, les relations de position, les caractéristiques du contenu, etc., permettant ainsi d'obtenir une conception Web dynamique et réactive. Vous trouverez ci-dessous une explication détaillée des sélecteurs de pseudo-classe CSS3 et des exemples de leurs applications pratiques.
1. Sélecteur de pseudo-classe statique
:link et :visited
:link : Utilisé pour sélectionner des hyperliens (éléments <a> ) qui n'ont pas été visités par l'utilisateur. Généralement utilisé pour définir des styles de base pour les liens non visités.
a:lien {
couleur : bleu ;
décoration de texte : aucune ;
} :visited : Sélectionnez les liens que l'utilisateur a visités. Utilisé pour définir des styles différenciés pour les liens visités.
a: visité {
couleur : violet ;
} 2. Sélecteurs de pseudo-classes d'interaction utilisateur :hover , :focus , :active
:hover : Correspond à un élément lorsque le pointeur de la souris le survole.
bouton : survoler {
couleur d'arrière-plan : #f0f0f0 ;
curseur : pointeur ;
} :focus : Sélectionnez l'élément qui reçoit le focus, que l'on trouve généralement dans les contrôles de formulaire ou les éléments pouvant avoir le focus (tels que <input> , <textarea> , <button> , etc.).
entrée: focus {
contour : 2px solide #007BFF ;
ombre de la boîte : 0 0 0 0,2rem rgba(0, 123, 255, 0,25) ;
} :active : Utilisé pour indiquer que l'utilisateur active ou appuie sur un élément (généralement lors d'un clic de souris ou d'un appui sur un écran tactile).
a:actif {
couleur : rouge ;
poids de la police : gras ;
} 3. Sélecteurs de pseudo-classes structurés :first-child , :last-child , :only-child , :nth-child(n) , etc.
:first-child : Sélectionne l'élément qui est le premier enfant de son élément parent.
li:premier-enfant {
type de style de liste : carré ;
} :last-child : Sélectionne l'élément qui est le dernier enfant de son élément parent.
div > p:dernier enfant {
marge inférieure : 0 ;
} :only-child : Sélectionnez les éléments qui n'ont pas de frères et sœurs.
.message : enfant unique {
largeur de bordure : 2 px ;
} :nth-child(n) : Sélectionnez le nième élément enfant de son élément parent, où n peut être un nombre, un mot-clé ( even , odd ) ou une formule (comme 2n+1 ).
li:ntième-enfant(2n) {
couleur d'arrière-plan : #f9f9f9 ;
}4. Sélecteurs de pseudo-classes liés au contenu
:empty , :target , :enabled , :disabled , :checked , etc.
:empty : Sélectionnez des éléments sans aucun contenu (y compris les éléments enfants, les nœuds de texte, etc.).
div.empty:vide {
affichage : aucun ;
} :target : Sélectionnez l'élément dont l'identifiant de fragment d'URL actuel (hachage) correspond à l'ID de l'élément.
#content:cible {
couleur de fond : jaune clair ;
} :enabled et :disabled : sélectionnez respectivement les éléments du formulaire dans les états activé et désactivé.
entrée : activé {
couleur de fond : blanc ;
}
entrée : désactivé {
opacité : 0,6 ;
curseur : non autorisé ;
} :checked : Utilisé lorsqu'une case à cocher ( <input type="checkbox"> ), un bouton radio ( <input type="radio"> ) ou un élément <option> est sélectionné.
input[type="checkbox"]:checked + étiquette {
décoration de texte : passage en ligne ;
}5. Annuler les sélecteurs de pseudo-classe
:not(selector)
:not() : Sélectionne les éléments qui ne correspondent pas au sélecteur spécifié entre parenthèses.
/* Sauf tous les paragraphes avec la classe "exclure" */
p:pas(.exclure) {
couleur : vert ;
}6. Autres sélecteurs de pseudo-classes
:root , :nth-of-type(n) , :nth-last-of-type(n) , :first-of-type , :last-of-type , :only-of-type etc.
:root : Sélectionnez l'élément racine du document (généralement l'élément <html> dans les documents HTML).
:racine {
--couleur primaire : #3498db ;
} :nth-of-type(n) et :nth-last-of-type(n) : similaire à :nth-child(n) , mais uniquement pour les éléments enfants d'un type spécifique parmi les éléments frères.
article : nième de type (pair) {
couleur d'arrière-plan : #f5f5f5 ;
} :first-of-type , :last-of-type et :only-of-type : sélectionnent respectivement le premier, le dernier ou le seul élément enfant d'un type spécifique parmi les éléments frères.
div > p : premier du type {
poids de la police : gras ;
}En maîtrisant les sélecteurs de pseudo-classe CSS3 ci-dessus et leurs scénarios d'application, les développeurs peuvent écrire du code CSS plus efficace, expressif et interactif pour améliorer l'expérience utilisateur et les effets visuels du site Web. À mesure que la norme CSS continue d'évoluer, de nouveaux sélecteurs de pseudo-classes pourraient rejoindre les rangs de CSS3 pour fournir des méthodes de contrôle plus riches et plus sophistiquées pour le développement front-end.
Qu'il s'agisse d'une pseudo-classe ou d'un pseudo-élément, ils sont tous conçus pour améliorer les fonctionnalités des sélecteurs CSS, permettant aux développeurs de contrôler plus finement le style et la disposition des éléments sans modifier la structure HTML.
Ceci conclut cet article sur les différences, les explications détaillées et les exemples d'application des pseudo-éléments et sélecteurs de pseudo-classe CSS3. Pour plus d'informations sur les pseudo-éléments et les sélecteurs de pseudo-classe CSS3, veuillez rechercher les articles précédents sur downcodes.com ou continuer à naviguer. Articles connexes ci-dessous, j'espère que vous soutiendrez downcodes.com à l'avenir !