9

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?

0

4 Answers 4

15

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".

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

2 Comments

I think the question says each individual number in the IDs must be targeted. The attribute substring selectors target a group.or range of values.
Perfect! That works with invalid ids like a GUID stating with a number too. For example: #8ab58c40-60c9-4984-adb5-13c44160459a Don't ask why we are using that as an id though...
5

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

1 Comment

Regular expressions are just patterns used to match values in strings. CSS substring matching attribute selectors, I would respectfully argue, are regular expressions. I use regex in my .htaccess files, others use them in JavaScript, so why not CSS? Cheers ;-)
3

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;
}

Comments

2

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.

1 Comment

It's a cool solution, but is not working in strict mode. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.