How to simplify numeric class name in CSS?

Question

Is it possible to simplify this to make it work infinitely when the number increase ?

.a1 .t1 {color: rgb(40, 40, 255);}
.a2 .t2 {color: rgb(40, 40, 255);}
.a3 .t3 {color: rgb(40, 40, 255);}
.a4 .t4 {color: rgb(40, 40, 255);}
.a5 .t5 {color: rgb(40, 40, 255);}
.a6 .t6 {color: rgb(40, 40, 255);}

Is it possible with attributes that change relative to the number ? Or is it possible to do it with a CSS variable ?

.a1 .line {transform: translateX(calc((830px / 6 + 1px) * 0));}
.a2 .line {transform: translateX(calc((830px / 6 + 1px) * 1));}
.a3 .line {transform: translateX(calc((830px / 6 + 1px) * 2));}
.a4 .line {transform: translateX(calc((830px / 6 + 1px) * 3));}
.a5 .line {transform: translateX(calc((830px / 6 + 1px) * 4));}
.a6 .line {transform: translateX(calc((830px / 6 + 1px) * 5));}

Unfortunately no. I wish it could be possible with attr(), maybe someday... — Alon Eitan
– Alon Eitan, Commented Sep 21, 2021 at 15:02
It can only be achieved by JavaScript I guess or you can use Sass/Less to simplify things. — Akashxolotl
– Akashxolotl, Commented Sep 21, 2021 at 15:14

Richard Deeming · Accepted Answer · 2021-09-21 16:18:22Z

1

If you can change the HTML at all, you can use a CSS variable:

.a .line { 
    transform: translateX(calc((830px / 6 + 1px) * var(--offset, 0))); 
}

<div class="a" style="--offset:0;">
    <div class="line">...</div>
</div>
<div class="a" style="--offset:1;">
    <div class="line">...</div>
</div>
<div class="a" style="--offset:2;">
    <div class="line">...</div>
</div>

Using CSS custom properties (variables)

If your HTML is fixed, then unfortunately you're going to need to use Javascript as mentioned in the comments. For example:

document.querySelectorAll('*').forEach(el => {
    el.classList.forEach(c => {
        const match = c.match(/^a(\d+)$/);
        if (match) {
            el.classList.add("a");
            el.style.setProperty("--offset", match[1]);
        }
    });
});

answered Sep 21, 2021 at 16:18

Richard Deeming

31.5k11 gold badges86 silver badges167 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to simplify numeric class name in CSS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related