Comment modifier le style CSS d'un dataset selon sa valeur ?

Réponses rédigées par Antoine
Dernière mise à jour : 2020-03-22 18:49:44
Thèmes : webmaster - css - svg - dataset
Question

Bonjour, j'ai un SVG dont je voudrais modifier la valeur fill de certaines balises <path>, ces balises sont identifiées par un dataset du type data-num="un numero".

Comment je fais en CSS pour modifier par exemple la couleur fill du data-num="2" ?

Mon code ressemble à ça :

<svg id="map" ..... >
...
<path data-num="1" ... ></path>
<path data-num="2" ... ></path>
<path data-num="3" ... ></path>
...
Réponse

Vous pouvez modifier le style CSS d'un dataset selon sa valeur comme ceci :

<style>
#map path[data-num='2']{fill: orange;}
</style>

Voici ce que fait cette ligne de code :

  • #map identifie le conteneur dont l'id est map.
  • path identifie les balises <path> incluses dans le conteneur.
  • [data-num='2'] identifie plus précisément la balise <path> dont le data-num est égal à 2.
  • {fill: orange;} définit la valeur de la propriété fill sur orange.