Comment obtenir CSS pour sélectionner ID qui commence par une chaîne (pas dans Javascript) ?

Question

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

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

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

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

Answer 1

[id^=product]

^= indique "commence par". Inversement, $= indique « se termine par ».

Les symboles sont en fait empruntés à la syntaxe Regex, où ^ $ signifient respectivement « début de chaîne » et « fin de chaîne ».

Voir les spécifications pour plus d'informations.

Answer 2

Je le ferais comme ça :

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

Idéalement, utilisez un cours. 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 {
  ...
}

Answer 3

Utilisez le sélecteur d'attribut

[id^=product]{property:value}

Answer 4

Je veux partager cette solution aussi, peut-être qu'à l'avenir cela pourrait aider quelqu'un.
Comme les autres l'ont dit, vous pouvez écrire [id^=product] pour id

Mais nous pouvons également donner un exemple pour le class : [class^="product-"] qui indique que les classes commencent par le produit et aussi * comme ceci [class*="product-"]

Voici un exemple simple :

/* Icons */
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'mk-font' !important;
  font-size: 3em;
}

bonne chance ...

Answer 5

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 inclus dans les guillemets doubles.