CODEWITHSUNDEEP
htmlcsscss-selectors
QueueHammer
QueueHammer

Reputation: 10824

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

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?

Upvotes: 1

Views: 121

Answers (1)

Michal
Michal

Reputation: 3642

Try this solution:

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

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

Upvotes: 1

Related Questions