How to select only some children in CSS?

css, css-selectors

Solution

EDIT If Only 2,5,8,11 is needed then the answer would be:

p:nth-child(3n+2)
{
   background: #ccc;
}

To select paragraphs 2, 3, 5, 8, 11:

p:nth-child(3n+2),p:nth-child(3)
{
   background: #ccc;
}

FIDDLE

I had to add p:nth-child(3) separately because it doesn't fit in the general pattern of +3 each time.

Problem

I have some divs in my HTML, a dynamic number of divs How to select only divs 2,5,8,11 ? I tried this `:nth-child(2n+3)` but is not exactly what I need Here's the code: ``` <!DOCTYPE html> <html> <head> <style> .a:nth-child(2n+3) { background:#ff0000; } </style> </head> <body> <p class="a">The first paragraph.</p> <p class="a">The second paragraph.</p> <p class="a">The third paragraph.</p> <p class="a">The fourth paragraph.</p> <p class="a">The fifth paragraph.</p> <p class="a">The sixth paragraph.</p> <p class="a">The seventh paragraph.</p> <p class="a">The eight paragraph.</p> <p class="a">The ninth paragraph.</p> <p class="a">The seventh paragraph.</p> <p class="a">The eight paragraph.</p> <p class="a">The ninth paragraph.</p> </body> </html> ```

Original source