Comment faire en sorte que CSS sélectionne un ID commençant par une chaîne (pas en Javascript)?

194

Si le HTML contient des éléments comme celui-ci:

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

Comment faire correspondre tous ces identifiants commençant par "produit"?

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

html css css-selectors Guptron
la source

Réponses:

364 
[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.

Niet the Dark Absol
la source
1
Merci pour la méthode et l'explication, j'ai édité ma question afin qu'elle soit plus claire. Par curiosité, existe-t-il un moyen de faire correspondre une chaîne à l'intérieur de la chaîne de l'identifiant?
guptron
Voir les spécifications , ils l'expliquent mieux que moi!
Niet the Dark Absol
@itamar: J'apprécie votre tentative de modifier ma réponse, mais les citations ne sont requises que si la valeur contient des caractères qui ne sont pas un identifiant valide. productest clairement un identifiant valide et n'a donc pas besoin de guillemets.
Niet the Dark Absol
La spécificité de ce type de sélecteur est très faible
nuander
3
@ Emerald214:not([id^=product])
Niet the Dark Absol
59

Je le ferais comme ceci:

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

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

<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 {
  ...
}
Mixeur
la source
1
@Blender, merci, j'ai choisi l'autre réponse car elle m'explique un peu plus et comprend les symboles utilisés. Je ne peux pas utiliser de classes pour ce scénario, sinon, oui, ce serait mieux.
guptron
-1

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 commençant par le mot entre guillemets.

Luigi Spezia
la source
Comment avez-vous remarqué? référence?
Ben Bozorg
Doc pour cela ici: w3.org/TR/selectors-3/#attribute-selectors Ceci devrait sélectionner tous les id qui commencent ou sont égaux à "name_id"
Dessauges Antoine
att|=valn'est PAS le même que att^=val. D'après la référence mentionnée: Le |=sélecteur "Représente un élément avec l'attribut att, sa valeur étant soit exactement" val ", soit commençant par" val " immédiatement suivi de" - " ." Donc, un id comme "product42" ne correspondrait pas à |=, mais "produit-42" le ferait.
Goozak