CODEWITHSUNDEEP
htmlcsscss-selectors
Budda
Budda

Reputation: 18353

Difficulties with application of "nth-of-child" to table cells

I'm trying to apply nth-of-child style to table cells, but that don't work. According to my code I would like to have each 2nd cell content be right-aligned and has a gray color. But that style don't have any effect.

Here is the 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>

I've tried different kind of specification which object type to modify: "td", "tr td", "table tbody tr td" nothing affects my table.

I also tried to use ID to identify the table and apply style to id - that doesn't help as well.

P.S. I've tested in IE9, Chrome, FF

Upvotes: 1

Views: 996

Answers (2)

The Alpha
The Alpha

Reputation: 146269

tr td:nth-child(2) {
    text-align: right;
    color: #ccc;
}​

DEMO.

Upvotes: 0

animuson
animuson

Reputation: 54797

There is no such thing as the :nth-of-child selector. You appear to have mixed the two :nth-child and :nth-of-type selectors together...

Upvotes: 3

Related Questions