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> 

Answer 1

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