Menu
I wasn't sure of the best way to word this and that's probably why I have struggled to research it even though it is probably simple.
What I want to do is a apply CSS to a group of classes.
For example I have the classes .col-1, .col-2, .col-3, .col-4
What I want to be able to do is make some css that can say maybe change the border color for all classes with the text col- so I don't have to apply it to each individual number.
I'm sure I've seen this before but cannot think how to do it.
635
You could use [class*="col-"] CSS attribute selector to select any element contains at least one occurrence of col- as its class value. If all values of class attributes begin with col- , you could use [class^="col-"] selector. WORKING DEMO. To avoid styling unintended classes like .
To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows you to combine several CSS classes for one HTML element.
The CSS class Selector The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the class name.
You could use [class*="col-"] CSS attribute selector to select any element contains at least one occurrence of col- as its class value.
[class*="col-"] { border-color: red; } If all values of class attributes begin with col-, you could use [class^="col-"] selector.
However, in order to prevent for classes like foo-col-1 to be selected, you could use a combination of two above selectors as follows (Thanks to @JosephSpens):
[class^="col-"], [class*=" col-"] { border-color: red; } WORKING DEMO.
89
You can use
CSS [attribute*=value] selector
<style> div[class*=col-]{ color: green; } </style> <body> <div class="col-4"> <p>this is an example one</p> <div> <div class="test"> <p>this is an example one</p> <div> <div class="col-8"> <p>this is an example three</p> <div> </body> Please check below link
https://www.w3schools.com/cssref/sel_attr_contain.asp
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_attr_contain
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
