Attribute selector targeted at a value separated by space and is a list of hyphenated words

Question

I'm looking for selector to match a value that is a list of hyphenated words in the value of a class. [class|="word"] is supposed to do this but there cannot be anything preceding it. The selector [class*="word"] will work if there is a space separated word as the value, or if there is no space at all. An example of the first case can be seen here http://jsbin.com/OkIxaNa/2/ .

css

div {
  width:50%;
  height:100px;
  background-color:#aaa;
  margin: 5px 0 5px 0;
}

/*selector one*/
[class|="example-one"] {
  background-color:#0aa;
}

/*selector two*/
[class*="example-two"] {
  background-color:#a0a;
}

html

<div class="example-one-3">
  rule 1<br/>
  match
</div>
<div class="example-one-5">
  rule 1<br/>
  match
</div>
<div class="chaos example-one-7">
  rule 1<br/>
  wanted to match
</div>
<div class="chaos example-two-7">
  rule 2<br/>
  match
</div>
<div class="chaosexample-two-7">
  rule 2<br/>
  do not want
</div>

What I'm specifically looking for is to be able to select existing classes of the word-word-word format. So say to any element with a col-*-4 class value.

Is this possible using just css selectors?

possible duplicate: http://stackoverflow.com/questions/3338680/css-selector-by-class-prefix — andi, Aug 26 '13 at 17:19
@andi I don't see in that question where the person is looking for "col-*-4" did you even follow the example link? O. no. I get it. You looked on SO for the answer and when you couldn't find it you though this was a dupe. — QueueHammer, Aug 26 '13 at 17:41
Can you clarify what you mean by "col-*-4"? How does that relate to your example html (I do not see "col" anywhere)? — Justin Ko, Aug 26 '13 at 19:14
Jeez, @QueueHammer, chill out. Sorry if I misunderstood your example. — andi, Aug 27 '13 at 01:01
You have a very minor syntax error in your bin - I'm not sure how to fix it in there as I don't really use it but I've corrected your code here. Not that it really matters though. Anyway, I can confirm what's stated in the answer that you can't achieve this using just a selector, because the class selector only does an exact match and attribute selectors aren't really optimized for space-separated values (except `~=` which would be useless here anyway). — BoltClock, Aug 27 '13 at 08:33

score 1 · Accepted Answer · answered Aug 26 '13 at 19:25

1

Try this solution:

div[class|=start][class$=end] {
  color: red;
}

<div class="start-anything-end">text</div>

answered Aug 26 '13 at 19:25

Michal

3,584
9
47
74

Nice, that's clever. That may work for the app I'm working on now. Ideally I would like a generic way to select "no-match start-anything-end distraction". If your solution is all that can be done, prove it with the spec and this one's yours. – QueueHammer Aug 26 '13 at 19:29
you cant do more without javascript – Michal Aug 26 '13 at 19:31

Attribute selector targeted at a value separated by space and is a list of hyphenated words

1 Answers1