Comment faire en sorte que CSS sélectionne un identifiant qui commence par une chaîne (pas en Javascript)?

Si le HTML a des éléments comme ceci:

id="product42" id="product43" ... 

Comment faire pour que tous ces identifiants commencent par “produit”?

J’ai vu des réponses qui le font exactement en utilisant javascript, mais comment le faire uniquement avec CSS?

 [id^=product] 

^= indique “commence par”. Inversement, $= indique “se termine par”.

Les symboles sont en réalité empruntés à la syntaxe Regex, où ^ et $ signifient respectivement “début de chaîne” et “fin de chaîne”.

Voir les spécifications pour plus d’informations.

Je le ferais comme ça:

 [id^="product"] { ... } 

Idéalement, utilisez une classe. Voici à quoi servent les classes:

 

Et maintenant le sélecteur devient:

 .product { ... } 

Utilisez le sélecteur d’atsortingbut

 [id^=product]{property:value} 

J’ai remarqué qu’il y a un autre sélecteur CSS qui fait la même chose. La syntaxe est la suivante:

 [id|="name_id"] 

Cela sélectionnera tous les éléments ID qui commencent par le mot entre guillemets.