michel lompret michel lompret - 4 months ago 7
CSS Question

Select multiple classes with same property

I have multiple classes like this with same property:

.class1 > div{
background-color: red;
}


I try to reduce the CSS code with:

.class1, .class2, .class3 > div{
background-color: red;
}


But it doesn't work properly, it only takes the last class in this case
.class3
.

Is there a way to properly do this?

Answer

If you want the child div selected for each of the classes, you'll need to specify it with the selector for each class like so:

CSS

.class1 > div, .class2 > div, .class3 > div {
  background-color: red !important;
}

Single Selector (Wrong)

Selector For Each Class (Right)

Comments