CSS nth-child for greater than and less than

Question

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.

Answer 1

Update

CSS Selectors Level 4 has introduced the new of <selector> syntax by which we can target the nth element from the list of elements matching the <selector>.

E.g. :nth-child(n+3 of div.container) will match the 3rd, 4th, 5th, ... div.container elements, no matter if they are not the 3rd, 4th, 5th, ... elements of their parent.

From the Spec:

Example 49

By passing a selector argument, we can select the Nth element that matches that selector. For example, the following selector matches the first three “important” list items, denoted by the .important class:

:nth-child(-n+3 of li.important)

Note that this is different from moving the selector outside of the function, like:

li.important:nth-child(-n+3)

This selector instead just selects the first three children if they also happen to be "important" list items.

:nth-child(n+3 of div.container) {
  background-color: gold;
}

<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>
  <!--                   ^-- 6th element of its parent,
                             3rd of `div.container` list -->
  <div>7th</div>
  <div class="container">8th</div>
  <!--                   ^-- 8th element of its parent,
                             4th of `div.container` list -->
  <div>9th</div>
</div>

It is worth noting that the support of the of <selector> syntax is limited as of now.

Old Answer

Note: This answer was given prior the Selectors Level 4.

The :nth-child() pseudo-class selector 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.