Exécution de calculs (calc) sur des attributs de données en CSS (par exemple, module)

Question

Je viens d'apprendre que je peux sélectionner des éléments en utilisant des attributs de données, ce qui est génial. Je veux ensuite styliser ces éléments différemment en fonction de certaines calcutions. par exemple, je veux avoir 4 variétés de style, et je veux utiliser le module de l'attribut [data-pid] existant des éléments pour aider à déterminer le style. Par exemple, imaginez qu'il existe un ensemble de div contenant du texte qui a l'une des quatre couleurs de police (par exemple rouge, orange, jaune ou vert), et que la couleur d'une div individuelle dépend de son module de quatre. Je crois que le CSS (s'il est possible) irions quelque chose comme ceci:

div[0=data-pid-modulus-by-4]{ 
    color: red; 
} 

div[1=data-pid-modulus-by-4]{ 
    color: orange; 
} 

div[2=data-pid-modulus-by-4]{ 
    color: yellow; 
} 

div[3=data-pid-modulus-by-4]{ 
    color: green; 
} 

Est-il possible de calculer le module d'une donnée-pid/attribut en utilisant seulement CSS d'une manière similaire à ce que je ci-dessus montrent ou dois-je utiliser javascript pour accomplir ce module de la valeur d'un attribut? Si ce n'est pas possible, quelqu'un peut-il suggérer la solution la plus petite/la plus simple à laquelle il puisse penser pour le faire?

Merci!

Answer 1

Voici une solution simple JavaScript:

var pids = document.querySelectorAll('[data-pid]'); 
 

 
Array.prototype.forEach.call(pids, function(elem, index) { 
 
    elem.classList.add('pid-mod-' + (index % 4)); 
 
});

.pid-mod-0 { 
 
    color: red; 
 
} 
 

 
.pid-mod-1 { 
 
    color: orange; 
 
} 
 

 
.pid-mod-2 { 
 
    color: yellow; 
 
} 
 

 
.pid-mod-3 { 
 
    color: green; 
 
}

<div data-pid="0">0</div> 
 
<div data-pid="1">1</div> 
 
<div data-pid="2">2</div> 
 
<div data-pid="3">3</div> 
 
<div data-pid="4">4</div> 
 
<div data-pid="5">5</div> 
 
<div data-pid="6">6</div> 
 
<div data-pid="7">7</div>

---

Si tous les éléments sont frères et sœurs de l'autre, vous pouvez utiliser :nth-of-type() ou :nth-child() avec une gamme.

div[data-pid]:nth-of-type(4n+1){ 
 
    color: red; 
 
} 
 

 
div[data-pid]:nth-of-type(4n+2){ 
 
    color: orange; 
 
} 
 

 
div[data-pid]:nth-of-type(4n+3){ 
 
    color: yellow; 
 
} 
 

 
div[data-pid]:nth-of-type(4n+4){ 
 
    color: green; 
 
}

<div class="only-pids-in-here"> 
 
    <div data-pid="0">0</div> 
 
    <div data-pid="1">1</div> 
 
    <div data-pid="2">2</div> 
 
    <div data-pid="3">3</div> 
 
    <div data-pid="4">4</div> 
 
    <div data-pid="5">5</div> 
 
    <div data-pid="6">6</div> 
 
    <div data-pid="7">7</div> 
 
</div>

Answer 2

Vous ne pouvez pas calculer la valeur directement en CSS, ni SASS/LESS.

Pour ce faire, vous devrez utiliser Javascript.

Ce qui est tout à fait logique en calculant des parties de html en CSS même si cela serait faisable serait une pratique terrible.

Answer 3

Vous ne pouvez pas effectuer de calculs arithmétiques avec les valeurs des sélecteurs d'attribut dans un sélecteur. Les valeurs d'attribut sont toujours des chaînes et ne supportent que la sous-chaîne correspondant au mieux.

Answer 4

Il y a attr mais

La fonction attr() peut être utilisé avec une propriété CSS, mais le support des propriétés autres que le contenu est expérimental.

En théorie, vous devriez être en mesure de le faire

div[data-color] { 
    color: attr(data-color, 'color'); 
} 

Mais rien ne semble le soutenir. Je pensais que vous pourriez peut-être utiliser cela en conjonction avec calc mais calc ne supporte pas modulo non plus, donc il n'y a vraiment aucun moyen de calculer une couleur à partir d'un pid en utilisant les propriétés CSS.

Je pense que vous n'avez pas de chance. Vous devriez faire le calcul de pid-> couleur dans n'importe quel langage de modèle que vous utilisez à la place, devrait être aussi facile à faire.