CSS nth-child for greater than and less than

In my HTML I have,

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

In the above HTML I have the container class. In my CSS, I need to add some styles to .container:nth-child(3,4,5,6,..and so on). Means I need to apply all nth-child beside 1 and 2.

: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.

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 >>

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

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

Demo Fiddle

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.

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.