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
source

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
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
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

5

Utilisez le sélecteur d'attribut

[id^=product]{property:value}

— Musa
source

-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
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