Hi, I am new to :nth-child pseudo class selector, I'm have a problem with this. To the point here's my code : <!DOCTYPE html> <html dir="ltr" lang="en-US" > <head> <title>Untitled Document</title> <style> #homepage-widget{ position:relative; width:940px; margin:40px auto; background:#efe; } #homepage-widget .blurb{ width:220px; float:left; margin-right:20px; position:relative; background:#ddd; } #homepage-widget .blurb:nth-child(4n+4){ margin-right:0; background-color:#fcc; } .clearfix{ clear:both;} </style> </head> <body> <div id="homepage-widget"> <div id="blurb-1" class="blurb"> <h4>Easy Costumization</h4> <p>It is a long established fact that a reader will be distracted by the readable content.</p> </div> <div id="blurb-2" class="blurb"> <h4>Collaboration</h4> <p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</p> </div> <div id="blurb-3" class="blurb"> <h4>Shoping Cart</h4> <p>There are many variations of passages of Lorem Ipsum available.</p> </div> <div id="blurb-5" class="blurb"> <h4>Managed Archives</h4> <p>It uses a dictionary of over 200 Latin words, combined with a kokoro.</p> </div> <div class="clearfix"></div> </div> </body> </html> HTML: As you can see on the code i created a 4 div with width 220px left floated with right margin 20px, but i want to make the fourth have 0px margin right, so i'm using :nth-child(4n+4) to do it ( please see the css on <style> tags ) to help see the different i make it with a red color. So far it's work fine until i add a title like: <h2>Services</h2> HTML: Right before that 4 divs that i mentioned before, The problems is the red highlighted div is now on the 3rd, not on the 4th anymore. It's like that the <h2> tags counted as the div whereas i put the class on the pseudo class selector like : #homepage-widget .blurb:nth-child(4n+4){ margin-right:0; background-color:#fcc; } HTML: As you know the <h2> tag shouldn't counted as class .blurb right? To make my question clear, here's the link of my working code : Code without <h2> Title : http://dl.dropbox.com/u/10399976/testo2.html Code with <h2> Title : http://dl.dropbox.com/u/10399976/testo.html Please let me know what's wrong or if this question had already asked please point me with the article/thread, i really need this to be clear, because i think the :nth-child pseudo class selector is realy a great thing and i'm planing to use it often, if i realy know its behaviour. Thank YOu.
The count in nth-child always depends on the item count in parent's subitems. In your example the h2 tag has the same parent element than your blurb divs have and so it will be counted too. Take the h2 before div with id 'homepage-widget' or put another parent element (div) for your 'blurbs' in 'homepage-widget' after your h2.
I believe Wasi88 and Piortr are both right. You can do a normal fix by doing the :nth-child(4n+5) to account of the <h2> tag. But the reason this is happening is because :nth-child (counts the children of the parent). which in your case counts the <h2></h2> Just warp the .blurb in a <div></div> and it'll work fine.
#homepage-widget .blurb:last-of-type { margin-right: 0; background-color: #fcc; } Code (markup): would accomplish the same goal wouldnt it?
I believe he wanted it to be the last element of a "row" (which probably turns out to be each 4th element). As his "rows" could be of size "n"