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
Related Tags
More From Oodles
Ready to innovate? Let's get in touch
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Gaurav Arora
Gaurav is an experienced UI developer with experience and capabilities to build compelling UI's for Web and Mobile Applications.