CSS selector regex anything in between

Question

I'm creating the following elements:

    .dh-tl-tl {}
    .dh-tl-tr {}
    .dh-tl-br {}
    .dh-tl-bl {}

    .dh-tr-tl {}
    ...

    .dh-br-tl {}
    ...

    .dh-bl-tl {}
    ...

Is there a way I could get a CSS selector to get the 4 items in each group?

e.g.

    [class=(?<=.dh-)(.*)(?=-bl)] {}

I'd like to select all the .dh-*-tl, for example, or .dh-*-br. — Dan Heller
– Dan Heller, Commented Jul 26, 2016 at 20:18

Bert · Accepted Answer · 2016-07-26 20:16:39Z

10

You could use the ^= ('starts with') and $= ('ends with') attribute selectors.

[class^="dh-"][class$="-bl"]{}

answered Jul 26, 2016 at 20:16

Bert

2,5241 gold badge14 silver badges9 bronze badges

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

1 Comment

nicael Over a year ago

This is the best answer.

Richard Hamilton · Accepted Answer · 2016-07-26 20:24:35Z

It sounds like you are trying to select all elements whose class name begins with an expression and also ends with another expression.

There are two CSS selectors that can be used for this

[attribute*="value"] - Attribute begins with selector
[attribute$="value"] - Attribute ends with selector

[class^="dh-"][class$="-tl"] { color: red; }
[class^="dh"][class$="-tr"] { color: orange; }
[class^="dh"][class$="-bl"] { color: green; }
[class^="dh"][class$="-br"] { color: blue; }

<p class="dh-tl-tl">This is group 1, it is colored red</p>
<p class="dh-tl-tr">This is group 2, it is colored orange</p>
<p class="dh-tl-bl">This is group 3, it is colored green</p>
<p class="dh-tl-br">This is group 4, it is colored blue</p>

<p class="dh-tr-tl">This is group 1, it is colored red</p>
<p class="dh-tr-tr">This is group 2, it is colored orange</p>
<p class="dh-tr-bl">This is group 3, it is colored green</p>
<p class="dh-tr-br">This is group 4, it is colored blue</p>

<p class="dh-bl-tl">This is group 1, it is colored red</p>
<p class="dh-bl-tr">This is group 2, it is colored orange</p>
<p class="dh-bl-bl">This is group 3, it is colored green</p>
<p class="dh-bl-br">This is group 4, it is colored blue</p>

<p class="dh-br-tl">This is group 1, it is colored red</p>
<p class="dh-br-tr">This is group 2, it is colored orange</p>
<p class="dh-br-bl">This is group 3, it is colored green</p>
<p class="dh-br-br">This is group 4, it is colored blue</p>

http://www.w3schools.com/cssref/sel_attr_begin.asp

Bharoo Jangid · Accepted Answer · 2016-07-26 20:20:34Z

1

use this

if element like div then use and class begin 'dh-', you can use.

div[class*='dh-']

answered Jul 26, 2016 at 20:20

Bharoo Jangid

2821 silver badge9 bronze badges

Collectives™ on Stack Overflow

CSS selector regex anything in between

3 Answers 3

1 Comment

Comments

use this

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

use this

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related