Clever Geek Handbook

How to select css id with numbers in them?

So, I want to set up multiple html elements as shown below using regex in css selector:

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

The following CSS selector doesn't work:

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

I need to do something with the numbers in the regex, because the inputs can be dynamically added and assigned IDs with numbers.

What am I doing wrong?

+3


source to share


3 answers


How to use the following selector:

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



It will receive input data with an identifier starting with "something_stuff_" and ending with "_work".

+8


source


CSS does not support regular expressions in selectors. Use classes or start with and end with attribute selectors.



+3


source


An approach to this problem would be to use classes instead of ids, and have things that are styled the same to classify them the same. eg:

<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 choose a class instead of id.

.input_class {
    sweetstyleofawesomeness;
}
+2


source






More articles:


All Articles