CSS regex selector match one OR another condition?

Question

I'd like to match when /(\sclassName|^className)/ is satisfied, but when selecting css. Hypothetically I would use like:

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

I've found this resource, which is very nice: The Skinny on CSS Attribute Selectors, but it doesn't mention this use case.

I just want to match "icon-" in the following 2 examples, but not the 3rd.

Here, this 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 string:

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

I do not want to match this, with -icon in the middle of a string. I believe *= will match this one, as will |= :

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

Paul Roub · Accepted Answer · 2017-01-05 13:34:50Z

30

You'll need to use two separate selectors with the same rule. CSS selectors don't really support alternation.

[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>

edited Jan 5, 2017 at 13:34

answered May 30, 2014 at 20:56

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Danny Over a year ago

Ah, that's a good idea to put a space in front of the * matcher. Alright, thanks for chiming in first with this solution, you get the check!

James Donnelly · Accepted Answer · 2014-05-30 20:57:21Z

3

You can use the following selectors to select any element whose class either starts with "icon-" or contains " icon-" (note the space at the start):

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

JSFiddle demo.

answered May 30, 2014 at 20:57

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Collectives™ on Stack Overflow

CSS regex selector match one OR another condition?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related