Les sélecteurs CSS peuvent-ils cibler des éléments en fonction du préfixe de classe ?

Sélecteurs CSS par préfixe de classe

Question :

Est-il possible d'appliquer un CSS règle aux éléments où au moins une classe commence par un préfixe spécifié ? Par exemple, supposons que nous ayons l'extrait HTML suivant :

<div>
<p>Pouvons-nous appliquer une règle qui cible uniquement les divs avec des classes commençant par « status- » ?</p>
<p><strong>Réponse :</strong></p>
<p><strong>CSS 2.1 :</strong></p>
<p>En CSS 2.1, ce n'est pas possible.</p>
<p><strong>CSS 3 :</strong></p>
<p>CSS3 a introduit des sélecteurs de correspondance de sous-chaînes d'attributs qui rendent cela possible :</p>
<pre class="brush:php;toolbar:false">div[class^="status-"], div[class*=" status-"]

• [class^="status-"] correspond aux éléments dont l'attribut class commence par "status-".
• [class*=" status-"] correspond aux éléments dont l'attribut de classe contient "status-" directement après un caractère espace (en garantissant qu'il ne fait pas partie d'un autre mot).

Notez que ce dernier sélecteur inclut un caractère espace intentionnel, car les noms de classe sont généralement séparés par des espaces. Cela vérifie toutes les autres classes dans l'attribut de classe de l'élément et gère également les cas où les attributs de classe sont remplis d'espaces.

Si vous pouvez garantir que votre balisage n'aura jamais d'éléments où le préfixe de statut est intégré dans un autre mot, vous pourrait simplifier le sélecteur en [class*="status-"]. Cependant, pour des raisons de robustesse, la combinaison des deux sélecteurs est recommandée.

Alternativement, si vous contrôlez la génération HTML, il peut être plus simple de créer une classe « statut » dédiée avec le préfixe souhaité.