Селектор атрибутов, предназначенный для значения, разделенного пробелом, и представляет собой список переносимых слов

Question

Я ищу селектор, чтобы он соответствовал значению, которое представляет собой список переносимых слов в значении класса. [class|="word"] должен сделать это, но не может быть ничего предшествующего ему. Селектор [class*="word"] будет работать, если в качестве значения есть слово, разделенное пробелом, или если вообще нет места. Пример первого случая можно увидеть здесь 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> 

То, что я специально искал, чтобы быть в состоянии выбрать существующие классы формата слово-слово-слово. Поэтому скажите любому элементу значение col - * - 4.

Возможно ли это использовать только css селектора?

Answer 1

Попробуйте это решение:

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

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