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

css, css-selectors

Solution

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

Problem

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> ```

Original source

Related problems