CSS regular expression selector matching one or the other condition?

Question

I would like to match when /(\sclassName|^className)/executed, but when choosing css. Hypothetically, I would use as:

[class(^|\s)='className'] {
  font-size: 5000px;
}

I found this resource that is very nice: Leather on the CSS attribute selector , but it does not mention this use case.

I just want to match “icon-” in the following two examples, but not in the third.

Here it can be achieved with [class^='icon-]

<div class='icon-something another-class'>

Here this can be achieved with [class~='icon-'], but this does not match when "icon-" is at the very beginning of the class line:

<div class='another-class icon-something'>

I don't want to match this, with -icon in the middle of the line. I believe that it *=will correspond to this, as well as |=:

<div class='another-icon-class another-class'>

Answer 1

. CSS .

[class^='icon-'], [class*=' icon-'] {
  /* ... */
}

div {
  color: red;
}

[class^='icon-'], [class*=' icon-'] {
  color: green;
}

<div class='icon-something another-class'>should match</div>
<div class='another-class icon-something'>should match</div>
<div class='another-icon-class another-class'>should not match</div>

Answer 2

, "icon-", " icon-" ( ):

[class^="icon-"], [class*=" icon-"] { ... }

JSFiddle.