Type - Astuces CSS | CSS Almanach 2025

Un sélecteur de type (parfois appelé sélecteur de type d'élément) fait correspondre les éléments avec le nom de nœud d'élément correspondant, tel que

, et les balises. Les sélecteurs de type sont généralement utilisés pour apporter des modifications «larges» au style d'un site.

p ( /* "p" is the type selector */ margin: 0 0 1em 0; )

Usage courant

Souvent, les sélecteurs de type sont définis par défaut, comme dans une réinitialisation CSS où l'intention est de remplacer les valeurs par défaut du navigateur. Un exemple de la première ligne de normalize.css, une réinitialisation CSS populaire:

article, aside, details, figcaption, figure, footer, header, main, nav, section, summary ( display: block; )

Les sélecteurs de type ci-dessus définissent la propriété d'affichage de ces balises pour bloquer, de sorte que chaque fois que l'une de ces balises est utilisée sur tout le site, elle s'affiche en tant que bloc à moins qu'elle ne soit remplacée par un style plus spécifique.

Les meilleures pratiques

Il est généralement considéré comme une mauvaise pratique d'appliquer des changements de détails fins avec un sélecteur de type seul. Par exemple, appliquer une propriété «couleur: blanc» de manière générale à toutes les balises serait rarement utile sur n'importe quel site. En effet, les balises sont génériques et sont utilisées dans tous les sites à des fins diverses.

Cependant, avec un sélecteur de type tel que body ( ), réglage par défaut font-size et line-heightest commun. Cela est dû en partie au fait qu'il ne peut y avoir qu'une seule balise sur une page donnée, donc il y a moins de possibilités de conflits.

Spécificité et performances du sélecteur de type

Les sélecteurs de type sont au niveau le plus bas de la cascade de spécificité (généralement écrit comme 0, 0, 0, 1), ce qui signifie que presque tout remplacera le style appliqué via un sélecteur de type seul, et en ajoutant un sélecteur de type à une classe ou un ID dans votre CSS fournit une spécificité supplémentaire minimale.

Les sélecteurs de type se classent également plus bas sur l'échelle d'efficacité CSS que les classes et les identifiants. Par conséquent, il est techniquement meilleur choix de performances d'utiliser une classe ou un ID plutôt que le sélecteur de type plus générique (bien que la différence de vitesse réelle soit généralement négligeable).