Или: «Есть ли лучший способ сделать это?»
Ниже приведен пример CSS, который используется для 24 изображений SVG в документе X HTML. Они имеют стандартизированный внешний вид, отличаются только размерами и частотой каждого набора элементов, указанных в каждом наборе CSS селекторов. Psuedoclass nth-child(2) - n-child(4) используется во всех изображениях SVG. У меня вопрос, есть ли какая-то итерация или формула, которую я могу использовать, чтобы установить преобразование CSS, чтобы оно вычисляло, что преобразование вместо того, чтобы мне приходилось писать одно и то же правило 41 раз?
svg|g.rows>svg|use:nth-child(2),
svg|g.mult_rows svg|g:nth-child(2),
svg|g.product>svg|text:nth-of-type(2),
svg|g.multiply>svg|g>svg|text:nth-child(2),
svg|g.product>svg|text:nth-of-type(2)+svg|use
{transform:translate(0px, 50px);}
svg|g.rows>svg|use:nth-child(3),
svg|g.mult_rows svg|g:nth-child(3),
svg|g.product>svg|text:nth-of-type(3),
svg|g.multiply>svg|g>svg|text:nth-child(3),
svg|g.product>svg|text:nth-of-type(3)+svg|use
{transform:translate(0px, 100px);}
svg|g.rows>svg|use:nth-child(4),
svg|g.mult_rows svg|g:nth-child(4),
svg|g.product>svg|text:nth-of-type(4),
svg|g.multiply>svg|g>svg|text:nth-child(4),
svg|g.product>svg|text:nth-of-type(4)+svg|use
{transform:translate(0px, 150px);}
svg|g.rows>svg|use:nth-child(5),
svg|g.mult_rows svg|g:nth-child(5),
svg|g.product>svg|text:nth-of-type(5),
svg|g.multiply>svg|g>svg|text:nth-child(5),
svg|g.product>svg|text:nth-of-type(5)+svg|use
{transform:translate(0px, 200px);}
svg|g.rows>svg|use:nth-child(6),
svg|g.mult_rows svg|g:nth-child(6),
svg|g.product>svg|text:nth-of-type(6),
svg|g.multiply>svg|g>svg|text:nth-child(6),
svg|g.product>svg|text:nth-of-type(6)+svg|use
{transform:translate(0px, 250px);}
svg|g.rows>svg|use:nth-child(7),
svg|g.mult_rows svg|g:nth-child(7),
svg|g.product>svg|text:nth-of-type(7),
svg|g.multiply>svg|g>svg|text:nth-child(7),
svg|g.product>svg|text:nth-of-type(7)+svg|use
{transform:translate(0px, 300px);}
svg|g.rows>svg|use:nth-child(8),
svg|g.mult_rows svg|g:nth-child(8),
svg|g.product>svg|text:nth-of-type(8),
svg|g.multiply>svg|g>svg|text:nth-child(8),
svg|g.product>svg|text:nth-of-type(8)+svg|use
{transform:translate(0px, 350px);}
svg|g.rows>svg|use:nth-child(9),
svg|g.mult_rows svg|g:nth-child(9),
svg|g.product>svg|text:nth-of-type(9),
svg|g.multiply>svg|g>svg|text:nth-child(9),
svg|g.product>svg|text:nth-of-type(9)+svg|use
{transform:translate(0px, 400px);}
svg|g.rows>svg|use:nth-child(10),
svg|g.mult_rows svg|g:nth-child(10),
svg|g.product>svg|text:nth-of-type(10),
svg|g.multiply>svg|g>svg|text:nth-child(10),
svg|g.product>svg|text:nth-of-type(10)+svg|use
{transform:translate(0px, 450px);}
. . .
svg|g.rows>svg|use:nth-child(41),
svg|g.mult_rows svg|g:nth-child(41),
svg|g.product>svg|text:nth-of-type(41),
svg|g.multiply>svg|g>svg|text:nth-child(41),
svg|g.product>svg|text:nth-of-type(41)+svg|use
{transform:translate(0px, 2000px);}
(Код был сокращен по длине, но он повторяет один и тот же шаблон вплоть до 41)