Match any css class beginning with string

Question

I'm looking for a way in css to select any element with a class that matches the beginning of a string. I know about the [class*="string"] and [class^="string"] rules, but those aren't exactly what I'm looking for. ^= only matches the first class, so any preceding classes will break it. And *= looks for any part of the string, not just the beginning.

http://codepen.io/anon/pen/HiJjL

HTML:

<div class="asdf col-6">match</div>
<div class="col-6">match</div>
<div class="x-col-6">dont match</div>

CSS:

[class *= "col-"] {
    color:red;
}
[class ^= "col-"] {
    font-weight:bold;
}

The pen illustrates the problem. The first selector is too broad, the second is too narrow. Of course I can work around this by using *= and being careful with my other class names, but I was curious if this is possible.

Look at the upvoted answer to [this SO question](http://stackoverflow.com/questions/13352080/match-all-class-selectors-that-begin-with). I think it might apply to your question. — Icemanind, Sep 24 '14 at 22:36
@icemanind, you were right. i used a selector like this div[class^="col-"], div[class*=" col-"] — , Sep 24 '14 at 22:47

score 1 · Answer 1 · answered Sep 24 '14 at 22:35

1

CSS

span[id^='string_'] {}

HTML

<span id="string_example">string example</span>

answered Sep 24 '14 at 22:35

John

1
13
98
177

This really doesn't answer the question at all. – Sep 26 '14 at 15:59
The answer fits the question, the problem is that the classes aren't well formatted. Clean up the class names and you'll get it working. – John Sep 26 '14 at 20:45

score 0 · Answer 2 · answered Sep 24 '14 at 22:35

I don't know off such a possibility, but I also think it is not the right way. A better solution would be to add multiple classes to the element.

<div class="asdf col col-6">match</div>
<div class="col col-6">match</div>
<div class="x-col-6">dont match</div>

This way, you can tell that that div is a 'col' (column?) and more specifically, it is a 'col-6'.

Match any css class beginning with string

2 Answers2