web-dev-qa-db-fra.com

Quelle est la différence entre pseudo-classes et pseudo-éléments?

Quelle est la différence entre div::after {} et div:after {}? Quand devons-nous utiliser :: plus de :?

La notation à deux points et à un point est la distinction entre pseudo-classes et pseudo-éléments.

Quelle est la signification réelle de la déclaration ci-dessus?

csscss-selectorspseudo-element
48
Alice

De https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements

Pseudo-classe:

Une pseudo-classe CSS est un mot-clé, précédé de deux points (:), ajouté à la fin des sélecteurs pour indiquer que vous souhaitez styliser les éléments sélectionnés et uniquement lorsqu'ils sont dans un certain état. Par exemple, vous pouvez choisir de styler un élément uniquement lorsqu'il est survolé par le pointeur de la souris ou par une case à cocher lorsqu'il est désactivé ou coché, ou par un élément qui est le premier enfant de son parent dans l'arborescence DOM.

Exemples:

  • :actif
  • :vérifié
  • : nième enfant ()
  • :première
  • :flotter

Pseudo-éléments ::

Les pseudo-éléments ressemblent beaucoup à des pseudo-classes, mais ils ont des différences. Ce sont des mots-clés, cette fois-ci précédés de deux points (:) qui peuvent être ajoutés à la fin des sélecteurs pour sélectionner une certaine partie d'un élément.

Exemples:

  • ::après
  • ::avant
  • ::première lettre
  • ::Première ligne
  • ::sélection
  • :: toile de fond

Comme l'a déclaré @stephanmg:

Dans la pratique, :: before est utilisé comme: before et :: after est utilisé comme: after en raison de la compatibilité du navigateur. Les deux sont des pseudo-éléments, mais peuvent ressembler à des pseudo-classes. Cela peut être déroutant si vous lisez le code CSS.

44
Bas van Dijk

Pseudo-classes: il est appliqué automatiquement par le navigateur en fonction de la position de l'élément ou de son état interactif.

Par exemple:

E:hover Correspond aux éléments de type E lorsque le curseur le survole.

Pseudo-éléments: Il applique des styles au contenu en fonction de sa position dans la hiérarchie HTML.

Par exemple:

E::first-letter Ceci applique un style à la première lettre de la première ligne à l'intérieur d'un élément de niveau bloc E.

Alors,

La spécification CSS3 Selectors préfixe les pseudo-éléments avec deux points au lieu de un. Donc,: première lettre devient :: première lettre et: première ligne devient :: première ligne. IE 8 et les versions antérieures ne comprennent pas le préfixe des deux-points, vous devez donc utiliser les versions à un-colon pour éviter que les styles ne se brisent dans les anciens navigateurs.

8
Ehsan