Grouping in CSS with multiple classes

Posted By : Gaurav Arora | 22-Sep-2017

css

Hi, In this blog we are going to select multiple classes with common sub name.

As we all know that we use grouping in CSS to avoid multiple lines of code.

For example, we have to select a number of classes, for this we simply use

1 2	`.col-1, .col-2, .col-3, .col-4, .col-5{` `}`

This is a normal case where we have our predefined classes in the HTML and we just defined CSS for these particular classes.

Suppose we have a dynamic structure, let’s take a simple example of Tree Structure Plugin, In that plugin every time when you open a sub-option a unique class created on that option and we don’t know how many sub-options are there.

What will we do then, will we define the CSS for that uncountable number of classes? Which we don’t know where they will stop

In this case, we will select all the classes with that particular substring

Like we have to select

1 2	`.col-1, .col-2, .col-3, .col-4, .col-5` `.................{` `}`

All the classes that will come after .col-5

For this, we will use

1 2	`[class*="col-"]{` `}`

What will this do? This will select all the classes that start with col- so that we don’t have to apply the same property on multiple classes, as the classes will generate automatically and the properties will apply to all the classes.

By the using the above our requirement will fulfill and we can simply save multiple lines of codes