Select elements based on text content

I've done some Google searches to find out whether this has been discussed
in the past, and failed to find anything. It's quite possible, though, that
I don't know the appropriate keywords.

Here's an example:

<tr>
    <th>Chrome</th>
    <th>Firefox</th>
    <th>Internet Explorer</th>
    <th>Safari</th>
</tr>
<tr>
    <td>Yes</td>
    <td>Yes</td>
    <td>No</td>
    <td>Yes</td>
</tr>

To apply styling to the noes, one could do the following:

td.unsupported { font-weight: bold; color: red; } /* <td
class="unsupported">No</td> */

Alternatively:

td[rel="unsupported"] { font-weight: bold; color: red; } /* <td
rel="unsupported">No</td> */

Does CSS3 include a selector which matches elements based on their text
content? It would be fantastic, in this example, to be able to select all td
elements whose text content is "No".

David

Received on Monday, 29 March 2010 11:33:35 UTC