<table>
<tr>
<th> </th>
<td>$</td>
<td> </td>
</tr>
<tr>
<th> </th>
<td>$</td>
<td> </td>
</tr>
<tr>
<th> </th>
<td>$</td>
<td> </td>
</tr>
<tr>
<th> </th>
<td>$</td>
<td> </td>
</tr>
<tr>
<th> </th>
<td>$</td>
<td> </td>
</tr>
</table>
Here is my code, I want <td>s with "$" with a background of #CCC in all the <tr>s.
Can any one help me how to do this using nth-child, pseudo classes?
This question is related to
css
css-selectors
table tr td:nth-child(2) {
background: #ccc;
}
Working example: http://jsfiddle.net/gqr3J/
Current css version still doesn't support selector find by content. But there is a way, by using css selector find by attribute, but you have to put some identifier on all of the <td> that have $ inside. Example:
using nth-child in tables tr td
html
<tr>
<td> </td>
<td data-rel='$'>$</td>
<td> </td>
</tr>
css
table tr td[data-rel='$'] {
background-color: #333;
color: white;
}
Please try these example.
table tr td[data-content='$'] {_x000D_
background-color: #333;_x000D_
color: white;_x000D_
}<table border="1">_x000D_
<tr>_x000D_
<td>A</td>_x000D_
<td data-content='$'>$</td>_x000D_
<td>B</td>_x000D_
<td data-content='$'>$</td>_x000D_
<td>C</td>_x000D_
<td data-content='$'>$</td>_x000D_
<td>D</td>_x000D_
</tr>_x000D_
</table>Source: Stackoverflow.com