CSS peut-il sélectionner des éléments en fonction des préfixes de classe ?

La sélection de classes CSS basée sur un préfixe est-elle possible ?

Dans le domaine du développement Web, il est souvent nécessaire d'appliquer des règles CSS à des éléments basés sur sur des préfixes de classe spécifiques. Par exemple, vous souhaiterez peut-être cibler des éléments dont les classes commencent par le préfixe "status-".

Impossible de le faire avec CSS2.1

Malheureusement, CSS2 .1 ne fournit aucun moyen direct pour réaliser une sélection de classe basée sur le préfixe. Cependant, les sélecteurs de correspondance de sous-chaînes d'attribut CSS3 viennent à notre secours.

Sélection basée sur le préfixe avec CSS3

CSS3 introduit deux sélecteurs d'attributs qui peuvent nous aider :

[class^="status-"], div[class*=" status-"]

Répartition du Sélecteurs :

• [class^="status-"] - Correspond aux éléments dont l'attribut de classe commence par "status-".
• [class*=" status-" ] - Correspond aux éléments dont l'attribut de classe contient "status-" dans une chaîne séparée par des espaces.

La combinaison de ces deux sélecteurs garantit que nous attrapons tout éléments appropriés, même ceux avec plusieurs classes séparées par des espaces.

Un autre piège

Notez que la simple utilisation de [class*="status-"] peut également faire correspondre des éléments comme :

<div>
<p>Pour éviter cela, il est préférable de combiner les deux sélecteurs comme indiqué ci-dessus.</p>
<p><strong>Autres options</strong></p>
<p>Si vous contrôlez le balisage HTML, une approche plus simple consiste à séparer le préfixe de statut dans sa propre classe, par exemple :</p>
<pre class="brush:php;toolbar:false"><div><p>Cela vous permet de cibler des éléments avec [class="status-important"].</p></div>