Combine CSS syntax

Question

I have some similar css lines and I will combine them in a shorter way. My solution didn't worked.

css code

    .class-1 span.blue  {display:none;}
    .class-2 span.blue { display:none;}
    .class-456 span.blue { display:none;}

my solution

    .class-1,.class-2,.class-456 span.blue  {display:none;}

I know arrays form PHP, but is it possible to create a group with .class-$, where I can put all numbers for $?

Maybe this question is very simple for many people here, but I can't find a solution on google, because I didn't kow how to describe it correctly.

score 1 · Answer 1 · answered Sep 11 '19 at 21:04

You can only combine it like this with regular CSS:

.class-1 span.blue,
.class-2 span.blue,
.class-456 span.blue {
    display: none;
}

For anything more ambitioned, I would encourage you to look for a CSS pre-compiler like SCSS/Sass. This opens up many more possible solutions. Your example could then be written like this:

.class-1,
.class-2,
.class-456 { 
    span.blue {
        display: none;
    }
}

Combine CSS syntax

1 Answers1