CSS selector for repeatable table fields

Question

I have a table that is repeatable (made with php and javascript). The fields ID is "this_is_field_0"and name is "this_is_field[0]". The next field ID becomes "this_is_field_1" and so on. They increment by 1 for each time I add a new table group.

Is it possible to select all of these fields with CSS? Something like "#this_is_field[*]"?

Look on this example https://stackoverflow.com/questions/8903313/using-regular-expression-in-css — Dominik Lev, Jan 21 '20 at 09:22

score 2 · Accepted Answer · answered Jan 21 '20 at 09:22

2

Use an attribute selector

[id^="this_is_field_"]

This will select all the fields where the id starts with this_is_field_ and as a side effect it will keep the specificity low.

answered Jan 21 '20 at 09:22

Fabrizio Calderan

120,726
26
164
177

score 0 · Answer 2 · answered Jan 21 '20 at 09:39

The Operator ^ - Match elements that starts with

td[id^="this_is_field_"] { /* */}

The Operator $ - Match elements that ends with

td[id$="field_2"] { /* */}

The Operator * - Match elements that have an attribute containing

td[id*="is_field"] { /* */}

CSS selector for repeatable table fields

2 Answers2