Sélecteurs de type, de classe et d'ID

Un sélecteur de type cible un élément HTML (une balise) de votre document, on parle aussi de sélecteur de balise ou d'élément. Dans l'exemple ci-dessous on utilise les sélecteurs span, em et strong. Chaque instance de <span>, <em> et <strong> est ainsi mise en forme.

Essayez d'ajouter une règle CSS pour sélectionner l'élément <h1> et changer sa couleur en bleu.

Le sélecteur universel est indiqué par un astérisque (*) et sélectionne tout dans le document (ou à l'intérieur de l'élément parent s'il est enchaîné avec un autre élément et un combinateur descendant, par exemple). Dans l'exemple suivant, nous avons utilisé le sélecteur universel pour supprimer les marges de tous les éléments. Cela signifie qu'au lieu du style par défaut ajouté par le navigateur, qui espace les en-têtes et les paragraphes avec des marges, tout est collé, la distinction des paragraphes est mal aisée.

On peut rencontrer ce type de comportement dans les "feuilles de style de réinitialisation" qui suppriment toutes les mises en forme par défaut du navigateur. Très populaires à une époque, ces réinitialisations ont un gros inconvénient, la suppression de tous les styles par défaut signifie en effet qu'on doit construire la mise en forme de zéro ! On utilisera donc le sélecteur universel avec précaution, dans des situations très spécifiques, comme par exemple celle décrite ci-dessous.

On peut utiliser * pour rendre les sélecteurs plus lisibles, pour clarifier leur fonctionnement. Par exemple, si je veux sélectionner tout élément descendant de l'élément <article>, qui est le premier enfant de son parent, pour le mettre en gras, je peux utiliser le sélecteur :first-child, qu'on verra dans la leçon sur les pseudo-classes et pseudo-éléments :

article :first-child {
}

On peut néanmoins confondre ce sélecteur avec article:first-child ciblant les éléments <article> qui sont le premier descendant d'un élément.

Pour éviter cette confusion, on peut ajouter le sélecteur universel * à :first-child, le fonctionnement de ce dernier sera plus clair : il cible tout élément premier descendant d'un élément <article> :

article *:first-child {
}

Le sélecteur de classe commence par un point . et sélectionne tout élément du document auquel cette classe est appliquée. Dans l'exemple live ci-dessous, nous avons créé une classe appelée .highlight et l'avons appliquée à plusieurs endroits du document. Tous les éléments auxquels la classe est appliquée sont mis en évidence.

On peut créer un sélecteur ciblant les éléments d'un type donné appartenant à une classe donnée. Dans l'exemple suivant, la classe highlight met en surbrillance, mais elle le fait différemment quand elle s'applique à un <span> ou à un titre <h1>. Nous le faisons en utilisant le sélecteur de type pour l'élément ciblé, avec la classe ajoutée, sans espace blanc entre les deux.

Cette approche rend le CSS moins réutilisable : la déclaration ne s'applique qu'à ces éléments particuliers, et il faudrait ajouter un nouveau sélecteur pour que la règle parvienne à cibler d'autres éléments.

Vous pouvez attribuer plusieurs classes à un même élément et les sélectionner individuellement, ou cibler l'élément seulement quand toutes les classes apparaissent dans le sélecteur. Cela peut s'avérer utile si vous créez des composants qui peuvent être combinés de différentes manières sur votre site.

L'exemple ci-dessous présente trois <div> contenant chacun une note. Si la boîte est dans la classe notebox elle a une bordure grise. Si de plus elle est dans la classe warning ou danger, on change la border-color.

On indique au navigateur la combinaison de classes ciblée en enchaînant les sélecteurs de classe sans laisser d'espace entre.

Un sélecteur d'ID commence par un # plutôt que par un point, mais est essentiellement utilisé de la même manière qu'un sélecteur de classe. Une ID ne peut cependant être utilisée qu'une seule fois par document. Le sélecteur cible l'élément avec l'id associée ; on peut faire précéder l'ID d'un sélecteur de type pour ne cibler l'élément que si l'élément et l'ID correspondent. Voyons ces deux utilisations dans l'exemple suivant :

Notre exploration des sélecteurs se poursuit par l'étude des sélecteurs d'attributs.

• Précédent
• Aperçu : Blocs de base en CSS
• Suivant