How to use :not selector with :nth-of-type

Question

Im about styling a table. I want each odd row to have a specific background except the first row which contains headers.

I have used the following code which does not work:

.new-items-table tr:nth-of-type(odd):not(.new-items-table tr):nth-of-type(1)
{
background-color: red;
}

Why don't you wrap your headers in the tag and the body of a table in the tag? — pkacprzak, Aug 18 '13 at 12:26

score 6 · Answer 1 · answered Aug 18 '13 at 12:24

6

You can just do:

.new-items-table tr:nth-child(2n + 3) {
    background-color: red;
}

2n + 1 is the same thing as odd. 2n + 3 skips the first two rows.

Demo: http://jsfiddle.net/YVTTA/

answered Aug 18 '13 at 12:24

Blender

289,723
53
439
496

thanks very much. But is there any possible change to use it next to (odd) keyword? – Mostafa Talebi Aug 18 '13 at 12:27
@Mostafa: If you wrap the header in a `` and the body in a ``, you can just do `.new-items-table tbody tr:nth-child(odd)` – Blender Aug 18 '13 at 12:29

score 4 · Accepted Answer · edited May 23 '17 at 10:31

4

Some options:

1. ~ selector - http://jsfiddle.net/5sKqX/

.new-items-table tr ~ tr:nth-of-type(odd) {background-color:red;}

It matched trs that are after other trs, so it skips the header row.

2. use <thead> - http://jsfiddle.net/5sKqX/1/

<thead>
    <tr><th>Header</th></tr>        
</thead>
<tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
</tbody>

Css:

.new-items-table tr:nth-of-type(even) {background-color:red;}

3. use :not(:first-child) - http://jsfiddle.net/5sKqX/2/

.new-items-table tr:nth-of-type(odd):not(:first-child) {background-color:red;}

edited May 23 '17 at 10:31

Community

1
1

answered Aug 18 '13 at 12:26

Kobi

135,331
41
252
292

I tested it. It looker great. ~ worker nice, I always thought about such string...great..thanks – Mostafa Talebi Aug 18 '13 at 12:32

score 2 · Answer 3 · answered Aug 18 '13 at 12:34

2

As I wrote in the comment to your question, wrap your headers in <thead></thead> and the body of a table in <tbody></tbody>. Then you could simply use the following rule:

.new-items-table tbody tr:nth-child(odd)
{
    background-color: red;
}

answered Aug 18 '13 at 12:34

pkacprzak

5,537
1
17
37

How to use :not selector with :nth-of-type

3 Answers3