CODEWITHSUNDEEP
css
mbajur
mbajur

Reputation: 4474

nth-child not working as expected

I have a problem with using nth-child(n). Lets say i have such list:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

And styles:

li {
  margin: 0 10px 0 0;
}
li:nth-child(6n+6) {
  margin: 0;
}

For some reason, such combination sets margin: 0 for every fourth li element. What i'm trying to achieve is to set this zero margin for every sixth li. Can you please advise me how my css should look like?

Upvotes: 1

Views: 2842

Answers (2)

Matt Kieran
Matt Kieran

Reputation: 4220

6n+6 means start at 6 then do every other 6 from that point on so just using 6n is equivalent in this situation:

li:nth-child(6n) {
    margin: 0;
}

Also, this resource can be useful: http://css-tricks.com/examples/nth-child-tester/

If this doesn't work for you, your selector is wrong. Use something more specific like body > ul > li:nth-child(6n) or body > ul > li:nth-of-type(6n) which will only select every 6th li element.

Upvotes: 5

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

It actually targets only the sixth as shown in http://jsfiddle.net/6F37a/ (although the +6 is redundant)

Perhaps another rule is messing the margins..

Upvotes: 1

Related Questions