Performing calculations (calc) on data attributes in CSS (e.g. modulus)

Question

I just learned that I can select elements by using data-attributes, which is great. I then want to stylize these elements differently based on certain calcutions. for example, I want to have 4 varieties of style, and I want to use modulus of the existing [data-pid] attribute of the elements to help determine the style.

For example, imagine there are a set of divs containing text that has one of four font colors (eg red, orange, yellow, or green), and that an individual div's color depends on its modulus of four. I believe the CSS (if it is possible) would go something like this:

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

Is it possible to calculate the modulus of a data-pid/attribute using just CSS in a way similar to what I illustrate above or do I have to use javascript to accomplish this modulus of an attribute's value? If it is not possible can someone suggest the smallest/easiest js solution they can think of to do it?

Thanks!

Answer 1

Here's a simple JavaScript solution:

 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> 

---

If all the elements are siblings of each other, then you can use :nth-of-type() or :nth-child() with a range.

 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

You can not calculate the value directly in CSS, nor SASS/LESS.

You will have to use Javascript in order to do that.

Which makes total sense as calculating parts of html in CSS even if would be doable would be terrible practice.

Answer 3

You cannot perform arithmetic calculations with the values of attribute selectors within a selector. Attribute values are always strings, and only support substring matching at best.

Answer 4

There's attr but

The attr() function can be used with any CSS property, but support for properties other than content is experimental.

In theory, you should be able to do

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

But nothing seems to support it.

I was thinking maybe you could use that in conjunction with calc but calc doesn't support modulo either, so there's really no way for you to calculate a color from a pid using CSS properties.

I think you're out of luck. You should do the calculation of pid->color in whatever template language you're using instead, should be just as easy to do.