Использование nth-child в таблицах tr td

<table>
  <tr>
    <th>&nbsp;</th>
    <td>$</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>&nbsp;</th>
    <td>$</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>&nbsp;</th>
    <td>$</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>&nbsp;</th>
    <td>$</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>&nbsp;</th>
    <td>$</td>
    <td>&nbsp;</td>
  </tr>
</table>

Вот мой код, я хочу <td> с "$" с фоном #CCC во всех <tr> s.

Может ли кто-нибудь помочь мне, как это сделать, используя nth-child, псевдо классы?

Ответ 1

table tr td:nth-child(2) {
    background: #ccc;
}

Рабочий пример: http://jsfiddle.net/gqr3J/

Ответ 2

Текущая версия css по-прежнему не поддерживает выбор селектора по контенту. Но есть способ, используя css selector find по атрибуту, но вы должны поместить некоторый идентификатор на все <td>, у которых $ внутри. Пример: используя nth-child в таблицах tr td

HTML

<tr>
    <td>&nbsp;</td>
    <td data-rel='$'>$</td>
    <td>&nbsp;</td>
</tr>

CSS

table tr td[data-rel='$'] {
    background-color: #333;
    color: white;
}

Пожалуйста, попробуйте этот пример.

table tr td[data-content='$'] {
    background-color: #333;
    color: white;
}

<table border="1">
    <tr>
        <td>A</td>
        <td data-content='$'>$</td>
        <td>B</td>
        <td data-content='$'>$</td>
        <td>C</td>
        <td data-content='$'>$</td>
        <td>D</td>
    </tr>
</table>