Sélecteur de type
Sélectionne tous les éléments portant un nom de balise donné, par exemple chaque paragraphe p ou chaque élément de liste li.
Exemple
#h2 {
margin: 0 0 6px;
font-size: 20px;
}
p {
margin: 0 0 8px;
color: #a1a1aa;
}
a {
color: #c4b5fd;
text-underline-offset: 3px;
}<h2>Module 2 : les sélecteurs</h2>
<p>Chaque paragraphe de la page a la même couleur et le même espacement.</p>
<p>Chaque <a href="#">lien</a> est violet, sans ajouter aucune classe.</p>Définition et utilisation
#Un sélecteur de type est simplement un nom de balise HTML, sans point, sans croisillon ni parenthèses. La règle p { … } touche chaque paragraphe de la page, et li { … } chaque élément de chaque liste, quel que soit son emplacement dans le document. Dans les documents HTML, la casse du nom n’a pas d’importance, donc P et p désignent la même chose.
Il a une faible spécificité, (0, 0, 1), donc il perd face à n’importe quelle classe et n’importe quel identifiant. C’est pourquoi il convient parfaitement aux styles de base, comme l’espacement des paragraphes, l’apparence des liens ou la taille des titres, que les classes écraseront sans difficulté.
Vous pouvez combiner un sélecteur de type avec d’autres parties d’un sélecteur : p.lead est un paragraphe avec la classe lead, input[type="email"] est un champ pour une adresse e-mail. Le nom de la balise se place alors toujours en premier, avant la classe ou l’attribut.
Méfiez-vous des règles trop larges. Un style appliqué à un simple div ou span touche des centaines d’éléments, y compris des endroits auxquels vous ne pensez pas. Pour l’apparence de parties précises de la page, les classes restent le meilleur choix.
Syntaxe
#balise { propriété: valeur; }Exemples de sélecteurs
#- Tous les paragraphes à la fois : les deux éléments
<p>reçoivent un fond violet. - Chaque élément de liste, quelle que soit la liste dans laquelle il se trouve.
- Tous les liens. C’est un bon endroit pour fixer une couleur et un soulignement communs à tous les liens de la page.
- Les majuscules fonctionnent aussi, car en HTML les noms de balises ne sont pas sensibles à la casse. L’usage veut cependant qu’on les écrive en minuscules.
Exemples de sélecteurs en pratique
#p
<p> reçoivent un fond violet.p { background: #7c3aed; color: #fff; }li
li { background: #7c3aed; color: #fff; }a
a { background: #7c3aed; color: #fff; }H3
H3 { background: #7c3aed; color: #fff; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Gardez les styles basés sur des sélecteurs de type en haut de la feuille de style, comme base. Donnez leur apparence aux composants précis avec des classes, faciles à écraser et à déplacer.
- Ne stylisez pas des balises génériques comme
divouspan. Elles ne portent aucune signification, donc la règle touchera des endroits au hasard. - Ne combinez un sélecteur de type avec une classe que lorsque la classe doit agir sur une seule balise, par exemple
button.link. Dans les autres cas, la classe seule est plus flexible.
Entrées associées
#- .classeSélectionne les éléments qui ont la classe indiquée dans l’attribut class. Le sélecteur le plus utilisé pour styliser des composants.
- *L’astérisque correspond à chaque élément. Il sert aux réinitialisations de styles et aux règles qui visent tous les enfants d’un conteneur donné.
- A BUn espace entre deux sélecteurs sélectionne les éléments B situés n’importe où à l’intérieur de l’élément A, à n’importe quelle profondeur.
- A, BLa virgule combine plusieurs sélecteurs en une seule règle, pour leur donner les mêmes styles sans répéter les déclarations.
- SpécificitéLe poids d’un sélecteur, qui détermine quelle règle gagne lorsque plusieurs règles définissent la même propriété du même élément.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.