'CSS Stylesheet with several different classes under the same parent class

When writing a css stylesheet I'd like to know if there's a way to group several different classes inside another parent class.

Example, I have this:

.ParentContainerClass .class1 {

}

.ParentContainerClass .class2 {

}

.ParentContainerClass .class3 {

}

// ......many classes here

.ParentContainerClass .class1200 {

}

I'd like to know if there's a way that I could write something like this:

.ParentContainerClass {

    .class1 {

    }

    .class2 {

    }

    .class3 {

    }

// ......many classes here

    .class1200 {

    }

}

This is just to avoid having to go class by class (I have many) and qualify each of them individually with the "ParentContainerClass". Is there a way?

Thank you

css


Solution 1:[1]

You can try,

.ParentContainerClass .class-item {}
.ParentContainerClass .class-item.class1 {}

.class-item your main selector for all subs. .class1 for more spesific usage.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions