Remove duplicate attributes CSS

Question

I have a list of attributes

#tns1 > .tns-item {
    width: calc(5.9% - 6px);
}

#tns2 > .tns-item {
    width: calc(5.9% - 6px);
}

#tns3 > .tns-item {
    width: calc(5.9% - 6px);
}

#tns4 > .tns-item {
    width: calc(5.9% - 6px);
}

#tns5 > .tns-item {
    width: calc(5.9% - 6px);
}

#tns6 > .tns-item {
    width: calc(5.9% - 6px);
}

#tns7 > .tns-item {
    width: calc(5.9% - 6px);
}

How can I replace it with something similar so that it doesn't happen again.


#tns[n] > .tns-item {
    width: calc(5.9% - 6px);
}

where n is any number?

score 1 · Answer 1 · answered Mar 19 '22 at 09:10

You can give a try to

[id^="tn"] > .tns-item {
    width: calc(5.9% - 6px);
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors#attrvalue_4

[attr^=value]

Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.

or

If the specifity is not high enough, then you may also try

:is(#tns1 ,#tns2 ,#tns3,#tns4 ,#tns5 ,#tns6,#tns7) > .tns-item {
    width: calc(5.9% - 6px);
}

see https://developer.mozilla.org/en-US/docs/Web/CSS/:is

Remove duplicate attributes CSS

1 Answers1