大于和小于的 CSS nth-child

:nth-child() doesn't work on classes, it looks for the element itself. You'd need to wrap the .container divs by a wrapper and use the following:

.wrapper div:nth-child(n+3) {
/* put your styles here... */
}

<div class="wrapper">
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
</div>

Working Demo.

Clarifying on :nth-child()

Using .container:nth-child(n+3) may or may not work. Because, :nth-child() pseudo-class represents nth child element matching the selector (.container in this case).

If the .container element isn't the nth-child of its parent, it won't be selected.

From the Spec:

The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element.

Consider this example:

<div class="parent">
<div>1st</div>
<div>2nd</div>
<div>3rd</div>
<div class="container">4th</div>
<div class="container">5th</div>
<div class="container">6th</div>
<div>7th</div>
<div class="container">8th</div>
<div>9th</div>
</div>

In this case, .container:nth-child(2) won't select the 2nd div.container element (which has 5th content). Because that element is not the 2nd child of its parent, in parent's children tree.

Also, .container:nth-child(n+3) will select all the div.container elements because n starts from 0 for the first element in the parent's children tree, and the first div.container is the 4th child of its parent.

n starts from 0


n = 0: (0 + 3) = 3 => 3rd element
n = 1: (1 + 3) = 4 => 4th element
n = 2: (2 + 3) = 5 => 5th element
...

Hence div.container:nth-child(n+3) represents all the 3rd, 4th, 5th, ... child elements matching div.container selector.

Online Demo.

If it's just 1 and 2 you don't want the style applied to you can do something like this instead:

.container {
background: yellow;
}


.container:first-child,
.container:first-child + .container {
background: transparent;
}

The yellow background will apply to every container except for the first child and the one following it.

Try the following code.It will apply styles to all .container classes except 1 and 2:

.container+.container~.container{
/*styles*/
}

Demo Fiddle

css:

.wrapper div:nth-child(n+3) {    /* you style*/   }

Reason and Explanation

 (0+3) = 3 = 3rd Element
(1+3) = 4 = 4th Element
(2+3) = 5 = 5th Element  and so on ... where n=0,1,2,3.....

Live example >>

For those after a dynamic solution (if you don't want to hard-code the column widths etc), I've published a javascript solution, based on this excellent answer.

Working example

Usage:

// After including tableColumnFreeze.js
var freezer = document.getElementById('freezer');
new TableColumnFreeze(freezer);

Markup:

<div id="freezer">
<table>
<thead>
<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
</thead>
<tbody>
<tr><th>Frozen</th><td>Not frozen</td><td>Not frozen</td></tr>
<tr><th>Frozen</th><td>Not frozen</td><td>Not frozen</td></tr>
<tr><th>Frozen</th><td>Not frozen</td><td>Not frozen</td></tr>
<tr><th>Frozen</th><td>Not frozen</td><td>Not frozen</td></tr>
</tbody>
</table>
</div>

.container ~.container{
padding: 0
margin: 0
}

I used to apply all classes except first class.