Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts

    CSS: after second child

    Hi guys,

    I want to apply a margin to every element of type <article> after the second occurrence of the element in my #main div. How would I come around that with a tricky css approach?

    This is what I have so far, but it doesn't work:

    Code:
    	#main>article:nth-of-type(2) article:after {
    					margin:54px 0 0 0;
    					}
    Would anybody know how to solve it?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,880
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    Code:
    #main > article:first-child + article ~ article {…}

  • Users who have thanked VIPStephan for this post:

    CaptainB (02-14-2012)

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    That is SO clever!
    Thank you a lot, VIPStephan - I had never figured that out.

  • #4
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    And a bonus-question - I thought it was easy, but it's not. I've tried several combinations from here (http://www.w3schools.com/cssref/css_selectors.asp), but I can't seem to get my head around it.

    How would I apply a margin to every second occourrence element of type <article>?
    This is not what I'm after:
    Code:
    #main> article:nth-last-of-type(2){..}
    as the above really adds to the third element and does not continue throughout the elements. No luck with the below statet either:

    Code:
    #main> article:nth-last-of-type(2) ~ article
    or
    Code:
    #main> article:nth-last-of-type(1) ~ article

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,880
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    Code:
    #main > article:nth-child(2n+2) {…}
    2n means “every other occurrence” and +2 means “starting at the second occurrence”.
    Edit: Just noticed it could be even simpler with just :nth-child(2n); no need for +2
    Last edited by VIPStephan; 02-15-2012 at 01:07 AM.

  • Users who have thanked VIPStephan for this post:

    CaptainB (02-15-2012)

  • #6
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Thank you, VIPStephan!
    I was not aware of the n-case.

    I have tested it out, however, it seems like it is not completely functional with all cases. For instance it works with the color:; attribute, but I can only make it work on the first element with the margin:; attribute. Would you know to happen why? Relevant code is shown below:

    Code:
    	article {		width:320px;
    					float:left;
    					text-align:justify;
    					line-height:22px;
    					}
    					
    	article h3 {	margin:0 0 25px 0;}
    
    	
    	/*break the line after every second <article>*/
    	#main>article:nth-last-of-type(2) {
    					clear:left;
    					}
    					
    	
    	/*apply margin to any <article> after every second occurrence of the element. */
    	#main > article:first-child + article ~ article {
    					margin:54px 0 0 0;
    					}
    					
    
    	#main > article:nth-child(2n) {
    					margin:0 0 0 20px;
    					
    					}
    Code:
    <div id="main">
    		        <article> 
    				<h3>Heading A</h3>
    				<p>Test</p>
    			</article>
    
    		        <article> 
    				<h3>Heading B</h3>
    				<p>Test</p>
    			</article>
    			
                            <article>
    				<h3>Heading C</h3>
    				<p>Test</p>
    			</article>
    			
    			<article> 
    				<h3>Heading D</h3>
    				<p>Test</p>
    			</article>
    			
    		</div>

  • #7
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Nobody knows?

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,880
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    Sorry, I was out all day yesterday and today. It doesn’t work with margin because the rule before that last one has a higher specificity (because it’s more detailed). It works with color because you haven’t specified a different color in the previous rule, as opposed to the margin. You can overcome this with the !important keyword:

    Code:
    #main > article:nth-child(2n) {
    	margin:0 0 0 20px !important;
    }

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Quote Originally Posted by CaptainB View Post
    I want to apply a margin to every element of type <article> after the second occurrence of the element in my #main div. How would I come around that with a tricky css approach?
    The following selector selects the third occurrence of an article element and every article element child thereafter which is a child of the div#main element:

    Code:
    div#main > article:nth-of-type(n+3)
    Essentially, it selects:
    1. element 0 + 3 = element 3
    2. element 1 + 3 = element 4
    3. element 2 + 3 = element 5
    4. element 3 + 3 = element 6
    5. element n + 3 = element n + 3

    Quote Originally Posted by CaptainB View Post
    How would I apply a margin to every second occourrence element of type <article>?
    Any of the following selectors will work given the HTML structure shown in post #6:

    Code:
    div#main > article:nth-of-type(even) {}
    div#main > article:nth-of-type(2n) {}
    div#main > article:nth-child(even) {}
    div#main > article:nth-child(2n) {}
    Essentially, the above selects:
    1. element 2 * 0 = element 0
    2. element 2 * 1 = element 2
    3. element 2 * 2 = element 4
    4. element 2 * 3 = element 6
    5. element 2n = element 2n

    VIPStephan already showed you 2n. Wanting to select every other element is such a common task that there are two keyword shortcuts for that though: odd and even. In this case, the shortcut keyword is more verbose than using the mathematical expression, but it might be easier for you to remember.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    CaptainB (02-18-2012)

  • #10
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    You guys are great!

    VIPStephan: I did not realize that the above margin decleration would overwrite the one stated below. Is the code not read top-down making the second rule overwrite the first one? Thank you a lot for the explanation.

    Arbitrator: That was a very good explanation - thank you a lot! The examples provided did make it a lot more clear to me. I was not aware the the odd/even worked with non-numbered elements - but of course it makes sense!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •