1. MDN Web Docs
  2. Règles d'écriture
  3. Structures des documents
  4. Types de pages
  5. Modèle de page de sélecteur CSS

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Modèle de page de sélecteur CSS

Note : Supprimez cette note explicative avant de publier.

Page de garde :

Les métadonnées en haut de la page sont utilisées pour définir les « métadonnées de la page ». Les valeurs doivent être mises à jour de manière appropriée pour l'interface particulière.

md
---
title: :nom-du-sélecteur
slug: Web/CSS/Reference/Selectors/:name-of-the-selector
page-type: css-selector OU css-pseudo-class OU css-pseudo-element OU css-combinator
status:
  - deprecated
  - experimental
  - non-standard
browser-compat: css.selectors.name-of-the-selector
sidebar: cssref
---
title

Titre affiché en haut de la page. Format : :NomDuSélecteur. Par exemple, le sélecteur :hover a pour titre :hover.

slug

La fin du chemin de l'URL après https://developer.mozilla.org/fr/docs/). C'est formaté comme Web/CSS/Reference/Selectors/:name-of-the-selector. Par exemple, le slug du sélecteur :hover est Web/CSS/Reference/Selectors/:hover.

page-type (pages anglaises uniquement)

La clé page-type pour les propriétés CSS est l'une des suivantes : css-selector, css-pseudo-class ou css-pseudo-element, selon que le sélecteur est une pseudo-classe, un pseudo-élément, un combinateur, ou un sélecteur simple.

status (pages anglaises uniquement)

Indique le statut de cette fonctionnalité. Un tableau qui peut contenir une ou plusieurs des valeurs suivantes : experimental, deprecated, non-standard. Cette clé ne doit pas être définie manuellement : elle est définie automatiquement en fonction des valeurs dans les données de compatibilité des navigateurs pour la fonctionnalité. Voir « Comment les statuts des fonctionnalités sont ajoutés ou mis à jour ».

browser-compat (pages anglaises uniquement)

Remplacez la valeur de l'espace réservé css.selectors.NameOfTheSelector par la chaîne de requête pour le sélecteur dans le dépôt de données de compatibilité des navigateurs (angl.). L'outil utilise automatiquement la clé pour remplir les sections de compatibilité et de spécifications (en remplaçant les macros {{Compat}} et {{Specifications}} dans ces sections, respectivement).

Notez que vous devez d'abord créer ou mettre à jour une entrée pour le sélecteur et sa spécification dans notre dépôt de données de compatibilité des navigateurs (angl.). Consultez notre guide sur la façon de procéder.

Ceci est cssref pour toutes les pages de guide et de référence CSS. Voir Structures de page : Barres latérales pour plus de détails.

Macros en haut de page

Un certain nombre de macros apparaissent en haut de la section de contenu immédiatement après les métadonnées de la page. Ces macros sont ajoutées automatiquement par les outils, il est donc conseillé de ne pas les ajouter ou les supprimer :

  • {{SeeCompatTable}} — Cette macro génère une bannière Expérimentale, qui indique que la technologie est expérimentale. Si la technologie est expérimentale et est cachée derrière une préférence dans Firefox, vous devez également remplir une entrée pour elle dans la page Fonctionnalités expérimentales dans Firefox.
  • {{Deprecated_Header}} — Cette macro génère une bannière Obsolète, qui indique que l'utilisation de la technologie est déconseillée.
  • {{Non-standard_Header}} — Cette macro génère une bannière Non standard qui indique que la fonctionnalité ne fait partie d'aucune spécification.

Ne fournissez pas manuellement les macros d'en-tête de statut :

Reportez-vous à la section « Comment les statuts des fonctionnalités sont ajoutés ou mis à jour » pour ajouter ces statuts à la page.

Des exemples des bannières Expérimentale, Obsolète et Non standard sont présentés juste après ce bloc de notes.

Section de syntaxe ({{CSSSyntax}})

Le contenu de la section Syntaxe est généré à l'aide de la macro {{CSSSyntax}}. Pour que ces informations soient remplies, vous devez vous assurer qu'une entrée appropriée a été remplie pour le sélecteur dans notre fichier de données selectors.json (angl.). Voir selectors.md (angl.) pour plus d'informations.

Supprimez cette note explicative avant de publier

Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.

Obsolète: Cette fonctionnalité n'est plus recommandée. Même si certains navigateurs la prennent encore en charge, elle a peut-être déjà été supprimée des standards du web, est en passe d'être supprimée ou n'est conservée qu'à des fins de compatibilité. Évitez de l'utiliser et mettez à jour le code existant si possible ; consultez le tableau de compatibilité au bas de cette page pour vous aider à prendre votre décision. Sachez que cette fonctionnalité peut cesser de fonctionner à tout moment.

Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.

Le paragraphe de résumé — commencez par nommer le sélecteur et expliquer ce qu'il fait. Idéalement, cela doit être une ou deux phrases courtes.

css
/* Insérez un bloc de code montrant les cas d'utilisation courants */

Syntaxe

{{CSSSyntax}}

Pour utiliser cette macro, supprimez les accents inversés et la barre oblique inversée dans le fichier markdown.

Accessibilité

Cette section est optionnelle. Incluez des directives d'accessibilité, des bonnes pratiques et des préoccupations potentielles dont les développeur·euse·s doivent être conscients lors de l'utilisation de cette propriété. Vous pouvez également inclure des solutions de contournement ou des solutions lorsque c'est applicable.

Exemples

Notez que nous utilisons le pluriel « Exemples » même si la page ne contient qu'un seul exemple.

Un titre descriptif

Chaque exemple doit avoir un titre H3 nommant l'exemple. Le titre doit être descriptif de ce que fait l'exemple. Par exemple, « Un exemple simple » ne dit rien sur l'exemple et n'est donc pas un bon titre. Le titre doit être concis. Pour une description plus longue, utilisez le paragraphe après le titre.

Consultez notre guide sur la façon d'ajouter des exemples de code pour plus d'informations.

Note : Parfois, vous pouvez vouloir créer un lien vers des exemples donnés sur une autre page.

Scénario 1 : Si vous avez des exemples sur cette page et d'autres exemples sur une autre page :

Incluez un titre H3 (###) pour chaque exemple sur cette page, puis un dernier titre H3 (###) avec le texte « Plus d'exemples », sous lequel vous pouvez créer des liens vers les exemples sur d'autres pages. Par exemple :

md
## Exemples

### Utiliser l'API fetch

Exemple de Fetch

### Plus d'exemples

Liens vers plus d'exemples sur d'autres pages

Scénario 2 : Si vous n'avez des exemples que sur une autre page et aucun sur cette page :

N'ajoutez pas de titres H3 ; ajoutez simplement les liens directement sous le titre H2 « Exemples ». Par exemple :

md
## Exemples

Pour des exemples de cette API, voir [la page sur `fetch()`](https://example.org/).

Spécifications

{{Specifications}}

Pour utiliser cette macro, supprimez les accents inversés et l'antislash dans le fichier markdown.

Compatibilité des navigateurs

{{Compat}}

Pour utiliser cette macro, supprimez les accents inversés et l'antislash dans le fichier markdown.

Voir aussi

Incluez des liens vers des pages de référence et des guides liés à l'API actuelle. Pour plus de directives, consultez la section Voir aussi dans le Guide de style d'écriture.

  • lien1
  • lien2
  • lien_externe (année)

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu