Comment faire en sorte que CSS sélectionne un ID commençant par une chaîne (pas en Javascript)?
Si le HTML contient des éléments comme celui-ci:
id="product42"
id="product43"
...
Comment puis-je faire correspondre tous ces identifiants commençant par "produit"?
J'ai vu des réponses qui font exactement cela en utilisant javascript, mais comment le faire avec uniquement du CSS?
[id^=product]
^= indique "commence par". Inversement, $= indique "se termine par".
Les symboles sont en fait empruntés à la syntaxe Regex, où ^ et $ signifient respectivement "début de chaîne" et "fin de chaîne".
Voir les spécifications pour des informations complètes.
Je le ferais comme ça:
[id^="product"] {
...
}
Idéalement, utilisez une classe. Voici à quoi servent les classes:
<div id="product176" class="product"></div>
<div id="product177" class="product"></div>
<div id="product178" class="product"></div>
Et maintenant, le sélecteur devient:
.product {
...
}
Utilisez le sélecteur d'attribut
[id^=product]{property:value}
J'ai remarqué qu'il existe 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.