CODEWITHSUNDEEP
css
Nona
Nona

Reputation: 5462

How to select css IDs with numbers in them?

So I want to target multiple html element(s) like the below using a regular expression in a css selector:

<input id="something_stuff_013_work" />
<input id="something_stuff_016_work" />

The following CSS selector doesn't seem to work:

input[id*='[0-9]*_work']

I need to do something with digits in the regular expression because the inputs can be dynamically added and will be assigned ids with digits in them.

What am I doing wrong?

Upvotes: 9

Views: 12472

Answers (4)

Benjamin James
Benjamin James

Reputation: 63

Try prefixing the numeric id with \3.

I came across this today, it was the selector generated using chrometools, I'd not seen it before, and it works using Chromium Webdriver:

#\37

Full selector used is "#\37 > div > div.cell-text".

This was a selector to select an element with id = "7".

It (prefixing with \3) seems to work throughout the document I am looking at automating, with my current setup.

Upvotes: 2

ydobonebi
ydobonebi

Reputation: 240

An approach to this problem would be to use classes instead of ids and have things that are styled the same to be classed the same. for example:

<input id="something_stuff_01_work" class="input_class">
<input id="something_stuff_02_work" class="input_class">
<input id="something_stuff_03_work" class="input_class">

Then select the class instead of the id.

.input_class {
    sweetstyleofawesomeness;
}

Upvotes: 3

c-smile
c-smile

Reputation: 27460

CSS does not support regexes in selectors. Use classes or starts-from and ends-with attribute selectors.

Upvotes: 5

Mindastic
Mindastic

Reputation: 4121

What about using the following selector:

input[id^='something_stuff_'][id$='_work']

It will get inputs with id starting with "something_stuff_" and finishing with "_work".

Upvotes: 15

Related Questions