Выполнение вычислений (вычисление) атрибутов данных в CSS (например, модуль)

Question

Я только что узнал, что я могу выбирать элементы, используя атрибуты данных, что отлично. Затем я хочу стилизовать эти элементы по-разному на основе определенных вычислений. например, я хочу иметь 4 разновидности стиля, и я хочу использовать модуль существующего атрибута [data-pid] элементов, чтобы помочь определить стиль.

Например, представьте, что существует набор разделов, содержащих текст, который имеет один из четырех цветов шрифта (например, красный, оранжевый, желтый или зеленый), а цвет отдельного div зависит от его модуля из четырех. Я считаю, что CSS (если это возможно) будет идти-то вроде этого:

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

Можно ли рассчитать модуль с данными PID/атрибута, используя только CSS аналогично тому, что я иллюстрировать выше или мне нужно использовать javascript для выполнения этого модуля значения атрибута? Если это невозможно, кто-то может предложить самое маленькое/простое решение js, которое они могут придумать для этого?

Спасибо!

Answer 1

Вот простое решение 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>

---

Если все элементы являются родственниками друг друга, то вы можете использовать :nth-of-type() или :nth-child() с диапазоном.

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

Вы не можете вычислить значение непосредственно в CSS, а не SASS/LESS.

Для этого вам необходимо будет использовать Javascript.

Что делает общий смысл как вычисление частей html в CSS, даже если бы выполнимость была бы ужасной практикой.

Answer 3

Вы не можете выполнять арифметические вычисления со значениями селекторов атрибутов внутри селектора. Значения атрибутов всегда являются строками и в лучшем случае поддерживают только подстроку.

Answer 4

Там в attr но

Функция атр() может быть использован с любым свойством CSS, но поддержка других, чем содержание свойств является экспериментальным.

В теории, вы должны быть в состоянии сделать

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

Но ничего, кажется, поддерживает его.

Я думал, может быть, вы могли бы использовать это в сочетании с calc, но calc тоже не поддерживает modulo, так что вы не сможете вычислить цвет из pid с использованием свойств CSS.

Я думаю, вам не повезло. Вы должны сделать расчет цвета pid-> на любом используемом вами языке шаблонов, так же легко сделать.