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.