Dificuldades com a aplicação do “n-de-filho” às células da tabela

Question

Apr 27, 2012, 12:14 AM

Dificuldades com a aplicação do “n-de-filho” às células da tabela

Estou tentando aplicar o estilo nth-of-child às células da tabela, mas isso não funciona. De acordo com o meu código, eu gostaria que cada conteúdo da segunda célula fosse alinhado à direita e tivesse uma cor cinza. Mas esse estilo não tem nenhum efeito.

Aqui está o código:

<code><!DOCTYPE html>
<html>
<head><title>test table centerring</title></head>
<body>
<style type="text/css">
    td:nth-of-child(2) {
        text-align: right;
        color: #ccc;
    }
</style>

<table border="1">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Name 1</td>
            <td>Value 1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Name 2, Name 2, Name 2, Name 2</td>
            <td>Value 2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Name 3</td>
            <td>Value 3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Name 4</td>
            <td>Value 4, Value 4, Value 4, Value 4</td>
        </tr>
    </tbody>
</table>        
</body></html>
</code>

Eu tentei tipo diferente de especificação que tipo de objeto para modificar: "td", "tr td", "tabela tbody tr td" nada afeta minha tabela.

Eu também tentei usar o ID para identificar a tabela e aplicar o estilo ao id - isso também não ajuda.

P.S. Eu testei no IE9, Chrome, FF