How to select all elements whose ID starts and end

2020-01-31 02:42发布

问题:

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 the following <tr>s:

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

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

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