Pseudo élément :habituécréerElément qui n'existe pas dans le document. (La spécification css3 recommande d'utiliser deux deux-points, mais la plupart des navigateurs prennent également en charge l'utilisation d'un deux-points comme élément) Les pseudo-éléments couramment utilisés sont les suivants :
- ::after ( :after) — crée des éléments enfants après l'élément sélectionné (élément en ligne par défaut).
- ::before ( :before) — crée des éléments enfants avant les éléments sélectionnés (éléments en ligne par défaut).
- ::selection ( :selection) — S'applique à la partie du document qui est mise en surbrillance par l'utilisateur (telle que sélectionnée avec une souris ou un autre dispositif de sélection). Seuls certains attributs permettent l'utilisation de ce pseudo-élément.
- ::first-letter ( :first-letter) — ::first-letter sélectionne la première lettre de la première ligne d'un élément de niveau bloc, et il n'y a pas d'autre contenu (comme des images et des tableaux en ligne) avant la ligne où se trouve le texte)
- ::first-line (:first-line) — applique des styles à la première ligne d'un élément de niveau bloc.
- ::slotted() — utilisé pour sélectionner les éléments qui sont placés dans le modèle HTML
- ::cue ( :cue) — correspond à un signal WebVTT dans l'élément sélectionné. Cela peut être utilisé pour utiliser des sous-titres et d'autres indices dans le média de la piste VTT.
Pseudo classe :utilisé pour représenter une sorte d'élémentstatut spécial. (Indiquées par deux-points)
Les pseudo-classes couramment utilisées sont les suivantes :
- :nth-child( n ) — Indique le nième enfant de tous les frères et sœurs de l'élément actuel . Par exemple : nth-child(2n) signifie faire correspondre les éléments avec les positions 2, 4, 6, 8....
- :first-child — Indique le premier élément d'un ensemble de frères et sœurs.
- :focus — Indique l'élément ciblé (comme une entrée de formulaire).
- :hover — Généralement utilisé pour représenter l'état lorsque la souris est sur l'étiquette.
- :last-child — Indique le dernier élément enfant dans l'élément parent.
- :checked — Indique toute radio, case à cocher, sélection qui est cochée.
- :active — correspond aux éléments activés par l'utilisateur.
- :default — Indique l'élément de formulaire par défaut dans un ensemble d'éléments associés.
- :defined — désigne tout élément défini
- :disabled — Indique tout élément désactivé.
- :enabled — Indique tout élément activé.
- :link — Utilisé pour sélectionner un lien dans un élément.
- :nth-last-child() — fait correspondre les éléments à certaines positions des frères et sœurs de l'arrière vers l'avant
- :visited — Indique un lien que l'utilisateur a déjà visité.