How to Select Every Other Group of Three in CSS

Is it possible to select every other group of three in CSS?

You're looking for nth-child:

ul li:nth-child(6n+4),ul li:nth-child(6n+5),ul li:nth-child(6n+6) {
    background:red;
}

http://jsfiddle.net/bhlaird/utEP4/1/

How to select a group of elements after every nth-element in CSS?

Simple. you cant select occurring groups, but you can select every Nth element.

therefore, you need to select multiples of 6, and style 3 first elements with offsets +1, +2 and +3 from the recurring N as follows:

the following means in simple words: "every 6 elements, style only the 1st, 2nd and 3rd one"

p:nth-child(6n+1), p:nth-child(6n+2), p:nth-child(6n+3) {    font-weight:bold;    font-style:italic;}p {    display:inline;}

<p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p><p>O</p>

How do I apply a style to every nth set of size m?

You can use the comma operator like this:

:nth-child(6n-2), /* 4, 10, 16, 22, ... */
:nth-child(6n-1), /* 5, 11, 17, 23, ... */
:nth-child(6n)    /* 6, 12, 18, 24, ... */

ul {  list-style: none;  padding: 0;  margin: 0;}li {  display: inline-block;  padding: 5px;}li:nth-child(6n-2),li:nth-child(6n-1),li:nth-child(6n) {  background: green;}

<ul><li>01</li></ul><ul><li>01</li><li>02</li></ul><ul><li>01</li><li>02</li><li>03</li></ul><ul><li>01</li><li>02</li><li>03</li><li>04</li></ul><ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li></ul><ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li></ul><ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li></ul><ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li></ul><ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li></ul><ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li></ul><ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li></ul><ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li><li>12</li></ul>

Select every Nth element in CSS

As the name implies, :nth-child() allows you to construct an arithmetic expression using the n variable in addition to constant numbers. You can perform addition (+), subtraction (-) and coefficient multiplication (an where a is an integer, including positive numbers, negative numbers and zero).

Here's how you would rewrite the above selector list:

div:nth-child(4n)

For an explanation on how these arithmetic expressions work, see my answer to this question, as well as the spec.

Note that this answer assumes that all of the child elements within the same parent element are of the same element type, div. If you have any other elements of different types such as h1 or p, you will need to use :nth-of-type() instead of :nth-child() to ensure you only count div elements:

<body>
  <h1></h1>
  <div>1</div>  <div>2</div>
  <div>3</div>  <div>4</div>
  <h2></h2>
  <div>5</div>  <div>6</div>
  <div>7</div>  <div>8</div>
  <h2></h2>
  <div>9</div>  <div>10</div>
  <div>11</div> <div>12</div>
  <h2></h2>
  <div>13</div> <div>14</div>
  <div>15</div> <div>16</div>
</body>

For everything else (classes, attributes, or any combination of these), where you're looking for the nth child that matches an arbitrary selector, you will not be able to do this with a pure CSS selector. See my answer to this question.

By the way, there's not much of a difference between 4n and 4n + 4 with regards to :nth-child(). If you use the n variable, it starts counting at 0. This is what each selector would match:

:nth-child(4n)

4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...

:nth-child(4n+4)

4(0) + 4 = 0  + 4 = 4
4(1) + 4 = 4  + 4 = 8
4(2) + 4 = 8  + 4 = 12
4(3) + 4 = 12 + 4 = 16
4(4) + 4 = 16 + 4 = 20
...

As you can see, both selectors will match the same elements as above. In this case, there is no difference.

select every second element in a row with 3 items

How can I do this? I was thinking of using something like
:nth-child(2n) but this doesn't work

You are thinking just right. nth-child should do the job. However, you need to calculate the pattern.

How does this work? Xn+Y works by using n placeholder as the elements starting from 0.

So, 3n+2 will target starting from 3 x 0 + 2 = 2, 3 x 1 + 2 = 5, and so on. This will target your purple divs.
Similarly, 3n+1 will target 3x0+1 = 1, 3x1+1 = 4, and so on.
Lastly, 3n+3 is equivalent to just 3n.

div.item { margin: 4px; }div.item:nth-child(3n+1) { border: 1px solid red; }div.item:nth-child(3n+2) { border: 1px solid blue; }div.item:nth-child(3n) { border: 1px solid yellow; }

<div class='container'>    <!-- row 1 -->    <div class='item'>{item with red border}</div>    <div class='item'>{item with purple border}</div>    <div class='item'>{item with yellow border}</div>    <!- row 2 -->    <div class='item'>{item with red border}</div>    <div class='item'>{item with purple border}</div>    <div class='item'>{item with yellow border}</div>    <!-- row 3 -->    <div class='item'>{item with red border}</div>    <div class='item'>{item with purple border}</div>    <div class='item'>{item with yellow border}</div>    <!-- etc --></div>

How to use nth-child in CSS to select all elements after the 3rd one?

Yes you can do it using :nth-child(n+4)

In your case:

@media(max-width:768px) {
   .list li:nth-child(n+4) {
      display:none;
   }
}

You can see this fiddle : http://jsfiddle.net/wgLCH/2/

CSS nth-child ignores the first 3 elements, stylize the other 3 and repeats. Possible?

http://jsfiddle.net/bhlaird/7c3aw/
If you want your pattern to repeat every 6 elements (3 on, 3 off) use 6n.

div:nth-child(6n+4), div:nth-child(6n+5), div:nth-child(6n+6) {
    background-color:#0066cc;
}

nth-child for every two table rows

Realize that you are doing groups of 4, then you can see that you can have every 4th element and every 4th element minus one being white, then every 4th element minus two, or every 4th element minus 3 being grey.

So, you'd use 4n and 4n-1, then 4n-2 and 4n-3:

div:nth-child(4n), div:nth-child(4n-1) {
    background: red;
}
div:nth-child(4n-2), div:nth-child(4n-3) {
    background: blue;
}

That code isn't precise to your case, I wrote it for a jsFiddle proof-of-concept.

NB disclaimer: Keep in mind that nth-child does not work in IE8. Typical issue, of course.

How to select a range of elements in repeated pattern

This is a commonly-asked question, but I wanted to point out that the reason :nth-child(n+4):nth-child(-n+6) only matches one specific range of elements is that it only provides a single start point (n+4) and a single end point (-n+6). The only elements that can be greater than or equal to 4 and less than or equal to 6 are 4, 5 and 6, so it's impossible to match elements outside of this range using the same selector. Adding more :nth-child() pseudos will only narrow down the matches.

The solution is to think of this in terms of columns, assuming there will always be exactly 3 columns (elements) per row. You have three columns, so you will need three separate :nth-child() pseudos. Elements 4 and 10 from the first column are 6 elements apart, so the argument to all of the :nth-child() pseudos needs to start with 6n.

The +b portion in the An+B expression can either be +4, +5 and +6, or 0, -1 and -2 — they will both match the same set of elements:

li:nth-child(6n+4), li:nth-child(6n+5), li:nth-child(6n+6)
li:nth-child(6n), li:nth-child(6n-1), li:nth-child(6n-2)

You cannot do this with a single :nth-child() pseudo-class, or a single compound selector consisting of any combination of :nth-child() pseudos, because the An+B notation simply doesn't allow such expressions to be constructed that match elements in ranges as described.