Is it possible to use a "wildcard" for elements having a class name starting with a specific string in CSS3?
Example:
<div class="myclass-one"></div>
<div class="myclass-two"></div>
<div class="myclass-three"></div>
and then magically set all the above divs to red in one go:
.myclass* { color: #f00; }
The following should do the trick:
div[class^='myclass'], div[class*=' myclass']{
color: #F00;
}
Edit: Added wildcard (*) as suggested by David
myclass is also the first class-name contained within the class attribute. You might want to try div[class*=myclass] { /* ...stuff... */}.
div[class*=' myclass'],div[class^='myclass']
.myClass potentially being used with div.myClass instead. The attribute selector can stand alone (matching any elements that meet that criteria) or be narrowed to specific element. So don't worry about it being odd to have [class*="myClass"] all by itself.
div - or why you didn't include the -It's not a direct answer to the question, however I would suggest in most cases to simply set multiple classes to each element:
<div class="myclass one"></div>
<div class="myclass two"></div>
<div class="myclass three"></div>
In this way you can set rules for all myclass elements and then more specific rules for one, two and three.
.myclass { color: #f00; }
.two { font-weight: bold; }
etc.
myclass<->another-class, one<->myclass-one also you may need to be specific with .generic.special to increase the selector's specificity to apply overrides for color for example. (Not my answer, I just don't see the difference, and the votes feel unfair. Also the div comes from the question.)You can easily add multiple classes to divs... So:
<div class="myclass myclass-one"></div>
<div class="myclass myclass-two"></div>
<div class="myclass myclass-three"></div>
Then in the CSS call to the share class to apply the same styles:
.myclass {...}
And you can still use your other classes like this:
.myclass-three {...}
Or if you want to be more specific in the CSS like this:
.myclass.myclass-three {...}
[class^='myclass-'], [class*=' myclass-'] { color: red }[^="start"] [*="contain"] [$="ends"]( ^ * $ rules are from Regular expressions )