...

View Full Version : CSS: after second child



CaptainB
02-14-2012, 07:14 PM
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:


#main>article:nth-of-type(2) article:after {
margin:54px 0 0 0;
}

Would anybody know how to solve it?

VIPStephan
02-14-2012, 09:57 PM
#main > article:first-child + article ~ article {…}

CaptainB
02-14-2012, 10:14 PM
That is SO clever!
Thank you a lot, VIPStephan - I had never figured that out.

CaptainB
02-14-2012, 11:08 PM
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:

#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:


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

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

VIPStephan
02-15-2012, 12:02 AM
#main > article:nth-child(2n+2) {…}
2n means “every other occurrence” and +2 means “starting at the second occurrence”.
Just noticed it could be even simpler with just :nth-child(2n); no need for +2

CaptainB
02-15-2012, 08:14 AM
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:


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;

}


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

CaptainB
02-16-2012, 06:22 PM
Nobody knows?

VIPStephan
02-16-2012, 07:15 PM
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:


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

Arbitrator
02-17-2012, 02:33 AM
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:


div#main > article:nth-of-type(n+3)

Essentially, it selects:

element 0 + 3 = element 3
element 1 + 3 = element 4
element 2 + 3 = element 5
element 3 + 3 = element 6
element n + 3 = element n + 3


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 (http://www.codingforums.com/showpost.php?p=1193436&postcount=6):


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:

element 2 * 0 = element 0
element 2 * 1 = element 2
element 2 * 2 = element 4
element 2 * 3 = element 6
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.

CaptainB
02-18-2012, 07:36 PM
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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum