::marker - Sélecteur CSS

::marker

Résumé des caractéristiques du sélecteur ::marker

Description rapide
Pseudo-élément désignant le marqueur dans une liste (puce ou numéro).
Statut
Standard
Module W3C
Module CSS - Pseudo-éléments
Références (W3C)
Statut du document: WD (document de travail)

Description du pseudo-élément ::marker.

Le pseudo élément ::marker est un sélecteur qui cible les puces ou les numéros dans une liste (balises li). Seuls les puces ou les numéros sont concernés : ce sélecteur ne désigne pas le texte qui suit.

Exemples d'utilisation du pseudo-élément ::marker.

Les exemples ci-dessous montrent trois utilisations de ::marker :
    - Formatage de numéros.
    - Utilisation d'une image.
    - Utilisation d'un texte.

  1. Lundi
  2. Mardi
  3. Mercredi
  4. Jeudi
  5. Vendredi
  6. Samedi
  7. Dimanche
  • Lundi
  • Mardi
  • Mercredi
  • Jeudi
  • Vendredi
  • Samedi
  • Dimanche
  • Lundi
  • Mardi
  • Mercredi
  • Jeudi
  • Vendredi
  • Samedi
  • Dimanche

Compatibilité des navigateurs avec le pseudo-élément ::marker.

Le pseudo élément ::marker est relativement bien traité par les navigateurs, mais son imbrication avec ::before ou ::after est plus délicate. Reportez vous au tableau de compatibilité ci-dessous.

Colonne 1
Pseudo-élément (sélecteur) ciblant les puces ou les numéros d'une liste, et permettant de les styler ou d'adapter leur contenu.
Colonne 2
Support par les navigateurs des animations et transitions sur le pseudo-élément ::marker.
Colonne 3
Support par les navigateurs de l'imbrication de ::marker avec ::after et ::before.

Remarques :

(1) Le support de Safari est limité à la couleur ou à la taille des polices.

1
Pseudo-élément
::marker
2
Animations sur
::marker
3
Imbrication avec
::before et ::after
Estimation de la prise en charge globale.
81%
94%
67%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Firefox

Firefox pour Androïd

Chrome

Edge

Safari

1

Opéra

Safari sur IOS

1

Androïd Brower

Chrome pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse
Caniuse

Historique du pseudo-élément ::marker.

Voir aussi (autres pseudo-éléments).

De nombreux pseudo-éléments existent en CSS. Ils sont regroupés dans la spécification CSS Pseudo-Elements Module .

Sélecteurs :

::after
Pseudo-élément désignant l'emplacement situé juste après un élément.
::before
Pseudo-élément désignant l'emplacement situé juste avant un élément.
::details-content
Ce pseudo-élément cible le contenu détaillé d'une balise details.
::file-selector-button
Cible le bouton dans une zone de saisie du type file. Ce bouton a un rendu différent dans chaque navigateur.
::first-letter
Pseudo-élément désignant la première lettre du paragraphe.
::first-line
Pseudo-élément désignant la première ligne du paragraphe.
⚠
::grammar-error
Des pseudo-élément ciblant les textes comportant des fautes d'orthographe (::spelling-error) ou des fautes de grammaire (::grammar-error).
::highlight()
Pseudo-élément qui cible le texte sélectionné à la suite d'une recherche dans le navigateur.
✗
::inactive-selection
Désigne l'élément ou le texte sélectionné lorsque la fenêtre sur laquelle il se trouve n'est pas active.
::placeholder
Pseudo-élément désignant le texte de substitution dans une zone de saisie (attribut placeholder).
⚠
::prefix
Cible les caractères de ponctuation qui peuvent précéder la première lettre d'un élément. Permet une stylisation différente de la première lettre et des caractères qui la précède.
⚠
::search-text
Cible le texte recherché par l'internaute (zone de recherche CTRL+F du navigateur).
::selection
Pseudo-élément désignant le contenu sélectionné par l'utilisateur.
::spelling-error
Pseudo-élément désignant les mots ou les textes comportant des fautes d'orthographe.
⚠
::suffix
Cible les caractères de ponctuation qui peuvent suivre la première lettre d'un élément. Permet une stylisation différente de la première lettre et des caractères de ponctuation qui la suivent.
::target-text
Cible le texte de l'élément désigné par le signet de l'url.