How to select all elements whose ID starts and ends with specific strings?

Question

In CSS, how can I select all <tr> elements where their id begins with section_ and ends with _dummy?

E.g. I'd like to select and apply styles to the following <tr>’s:

<tr id="section_5_1_dummy">
    <td>...</td>
</tr>

<tr id="section_5_2_dummy">
    <td>...</td>
</tr>

To create selector when ID contains brackets `[]` => you have to double escape them with ``\`` => `[id$=\\[something\\]` (matches e.g. `
`) Thanks goes to: https://stackoverflow.com/a/1239127/1835470 (one escape is for string escape of ``\`` which then escapes the `[` and `]`). And [here is how I've added ``\`` to this comment](https://meta.stackoverflow.com/questions/275886/backslash-inside-backquotes-in-a-comment) — jave.web, May 10 '23 at 06:06

Danny Beckett · Accepted Answer · 2017-11-24T22:53:33.587

121

The following CSS3 selector will do the job:

tr[id^="section_"][id$="_dummy"] {
    height: 200px;
}

The ^ denotes what the id should begin with.

The $ denotes what the id should end with.

id itself can be replaced with another attribute, such as href, when applied to (for example) <a>:

a[href^="http://www.example.com/product_"][href$="/about"] {
    background-color: red;
}

edited Nov 24 '17 at 22:53

answered Apr 15 '13 at 07:24

Danny Beckett

1 Answers1