Comment puis-je combiner des sélecteurs de classe et d'ID en CSS pour cibler des éléments HTML spécifiques ?

Combinaison de classe et d'ID dans les sélecteurs CSS

Lors du style des éléments HTML, il est courant d'utiliser à la fois des classes et des ID pour cibler des éléments spécifiques. Dans certains cas, vous devrez peut-être combiner les deux critères. Voici comment y parvenir :

Interroger un élément avec à la fois un ID et une classe

Considérez le code HTML suivant :

<div>
<p>Pour styliser cet élément de la manière suivante qu'il possède à la fois la classe "sectionA" et l'ID "content", utilisez le sélecteur CSS suivant :</p>
<pre class="brush:php;toolbar:false">div#content.sectionA

Dans ce sélecteur, le symbole "#" précède l'ID, tandis que le "." le symbole précède la classe. Cela garantit que la règle CSS s'applique uniquement aux éléments qui répondent aux deux critères.

Notes supplémentaires

N'oubliez pas que l'ordre de la classe et de l'ID dans le sélecteur est important. Si vous écrivez ".sectionA#content", il sélectionnera les éléments avec la classe "sectionA" et n'importe quel identifiant, pas nécessairement "content".

Approches alternatives

En utilisant la technique ci-dessus, vous pouvez combiner plusieurs classes ou plusieurs identifiants. Cependant, il existe des approches alternatives pour éviter les longs sélecteurs :

1. Concaténer les classes : Concaténer les noms de classe comme "content-sectionA" ou "sectionA-content" pour créer une classe unique. Cela simplifie le sélecteur en ".content-sectionA" ou ".sectionA-content."
2. Utiliser les sélecteurs enfants : Si la classe s'applique à un élément enfant, vous pouvez utiliser le "> ;" symbole dans le sélecteur, par exemple : "div#content > p.sectionA."