Social Buttons
  1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS pseudo class selector :nth-child problem ( Really Need Helps )

Discussion in 'CSS' started by redlightshooter, Jan 14, 2012.

0
  1. #1
    Hi,
    I am new to :nth-child pseudo class selector, I'm have a problem with this. To the point here's my code :

    HTML:
    1. <!DOCTYPE html>
    2. <html dir="ltr" lang="en-US" >
    4.     <title>Untitled Document</title>
    5.     <style>
    6.         #homepage-widget{ position:relative; width:940px; margin:40px auto; background:#efe; }
    7.         #homepage-widget .blurb{ width:220px; float:left; margin-right:20px; position:relative; background:#ddd; }
    8.         #homepage-widget .blurb:nth-child(4n+4){ margin-right:0; background-color:#fcc; }
    9.        
    10.         .clearfix{ clear:both;}
    11.  
    12.     </style>
    13. </head>
    14.  
    16.     <div id="homepage-widget">
    17.        
    18.         <div id="blurb-1" class="blurb">
    19.             <h4>Easy Costumization</h4>
    20.             <p>It is a long established fact that a reader will be distracted by the readable content.</p>
    21.         </div>
    22.        
    23.         <div id="blurb-2" class="blurb">
    24.             <h4>Collaboration</h4>
    25.             <p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</p>
    26.         </div>
    27.        
    28.         <div id="blurb-3" class="blurb">
    29.             <h4>Shoping Cart</h4>
    30.             <p>There are many variations of passages of Lorem Ipsum available.</p>
    31.         </div>
    32.        
    33.         <div id="blurb-5" class="blurb">               
    34.             <h4>Managed Archives</h4>
    35.             <p>It uses a dictionary of over 200 Latin words, combined with a kokoro.</p>
    36.         </div>
    37.        
    38.         <div class="clearfix"></div>
    39.        
    40.     </div>
    41. </body>
    42. </html>
    43.  
    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:

    HTML:
    1.  
    2.         <h2>Services</h2>
    3.  
    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 :

    HTML:
    1.  
    2. #homepage-widget .blurb:nth-child(4n+4){ margin-right:0; background-color:#fcc; }
    3.  
    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.
     
    redlightshooter, Jan 14, 2012 IP
  2. Wasi88

    Wasi88 Peon

    Messages:
    25
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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.
     
    Wasi88, Jan 14, 2012 IP
  3. Piotr Aszoff

    Piotr Aszoff Active Member

    Messages:
    38
    Likes Received:
    3
    Best Answers:
    2
    Trophy Points:
    53
    #3
    Hi, why can't you just write #homepage-widget .blurb:nth-child(4n+5), and it will be fine ;)
     
    Piotr Aszoff, Jan 16, 2012 IP
  4. JamesD31

    JamesD31 Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #4
    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.
     
    JamesD31, Jan 17, 2012 IP
  5. rlvassallo

    rlvassallo Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Code (Text):
    1. #homepage-widget .blurb:last-of-type {
    2.            margin-right: 0; background-color: #fcc;
    3. }
    would accomplish the same goal wouldnt it?
     
    rlvassallo, Jan 18, 2012 IP
  6. JamesD31

    JamesD31 Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #6
    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"
     
    JamesD31, Jan 19, 2012 IP