CSS Nth-Child Ignores The First 3 Elements, Stylize The Other 3 and Repeats. Possible

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

Using nth-child to cycle through items, but ignore the first item

Not far off, you wanted to use nth-child as opposed to first-child (first child is just for the first child).

li:nth-child(3n+2) roughly means every 3rd li starting from position 2 and li:nth-child(3n+3) means starting at position 3 so on and so forth.

li:nth-child(3n+2) {  color: red;}li:nth-child(3n+3) {  color: green;}li:nth-child(3n+4) {  color: blue;}

<ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li>  <li>6</li>  <li>7</li>  <li>8</li>  <li>9</li>  <li>10</li></ul>

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/

nth-child doesn't respond to class selector

Try the :nth-of-type() pseudo-selector instead:

#content .foo:nth-of-type(1) { margin-top: 0; }

Note that :nth-of-type() counts the elements with the same name. So .foo:nth-of-type(1) will not select the first element with the class foo but any first element that is the first in the list of elements grouped by the same name. If you have some document like this:

<div>
    <i class="foo">1</i><i>x</i><i class="foo">2</i>
    <b class="foo">3</b><b>x</b><b class="foo">4</b>
</div>

.foo:nth-of-type(1) will select the elements <i class="foo">1</i> and <b class="foo">3</b> as both are the first of its own type.

CSS nth-child - get 1st, 2nd, 4th and 5th children at once?

If you want to be explicit, one way is to repeat :nth-child() like so:

tr:nth-child(1), tr:nth-child(2), tr:nth-child(4), tr:nth-child(5)

Alternately, since the table happens to have exactly 5 rows, you can just exclude the third row and you'll get rows #1, #2, #4 and #5:

tr:not(:nth-child(3))

jsFiddle preview

CSS first-child and nth-child not working correctly

This selector: .service:nth-child(2) { margin-right: 0!important;} isn't working because the element you are trying to select is not the 2nd child.

Also...by the way, neither is this one: .service:first-child { margin-right: 0!important;}.

The first-child is the anchor tag

<a name="services"></a>

Accordingly, you should use

.service:nth-child(3) { margin-right: 0!important;}

instead...in this specific instance.

JSfiddle Demo

css :nth-child() :after

You can, but you are doing it wrong..

The issue that that all your p elements are inside li. So all of them are the first child of their li container.

You will need to put the nth-child on the li elements.

#id li:nth-child(1) p:after,
#id li:nth-child(2) p:after,
#id li:nth-child(3) p:after {
    content: 'OM';
    color: pink;
}

#id li:nth-child(4) p:after,
#id li:nth-child(5) p:after,
#id li:nth-child(6) p:after {
    content: 'Nom';
    color: blue;
}

---

Quoting the W3C documentation

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.

---

Update 1

You could also simplify this by using

#id li:nth-child(-n+3) p:after {
    content: 'OM';
    color: pink;
}

#id li:nth-last-child(-n+3) p:after { /*this means last 3*/
    content: 'Nom';
    color: blue;
}

Demo at http://jsfiddle.net/gaby/4H4AS/2/

---

Update 2

If you want the first six only to be different (and not first 3 and last 3) you could

#id li:nth-child(-n+6) p:after { /*this means first 6*/
    content: 'Nom';
    color: blue;
}

#id li:nth-child(-n+3) p:after {/*this means first 3 and since it comes second it has precedence over the previous for the common elements*/
    content: 'OM';
    color: pink;
}

Demo at http://jsfiddle.net/gaby/4H4AS/3/

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.

---

Related Topics