Nth child issue

HTML & CSS
1

I’m trying to color each of the h2’s independently using nth-child but I’m not able to get anything to work.


<div id="accordion-1">	
		<dl><!--1st SLIDE-->
			<dt></dt>
			<dd><img src="wp-content/uploads/slide1.png" alt="" /><div class="callout x1"><h2>Welcome</h2>
			<br /><a href="#" class="more">More</a></p></div></dd>

			<!--2nd SLIDE-->
			<dt></dt>
			<dd><img src="wp-content/uploads/slide1.png" alt="" /><div class="callout x1"><h2>For Youth Development</h2>
			<br /><a href="#" class="more">More</a></p></div></dd>

			<!--3rd SLIDE-->
			<dt></dt>
			<dd><img src="wp-content/uploads/slide1.png" alt="" /><div class="callout x1"><h2>For Healthy Living</h2>
			<br /><a href="#" class="more">More</a></p></div></dd>

			<!--4th SLIDE-->
			<dt></dt>
			<dd><img src="wp-content/uploads/slide1.png" alt="" /><div class="callout x1"><h2>For Social Responsibility</h2>
			<br /><a href="#" class="more">More</a></p></div></dd>
		</dl>
	</div>



dl h2:nth-child(1){color:red}
dl h2:nth-child(2){color:green}
dl h2:nth-child(3){color:blue}
2

the problem stems from the fact that in your code the H2s are DECEDENTS , NOT CHILDREN, of the DL. As only DT’s and DDs can be children of DLs, you may acieve what you are going after by targeting the DTs first… EXCEPT that the NTH:CHILD selector selects , well… the Nth CHILD, that is the Nth tag within the parent, regardless of type. For example , the second child would actually be the first DD, the third would be the following tag(second DT) and so forth.

You may achieve what you are going after by using Nth of type, like this:



<div id="accordion-1" class="accord">...</div>

   .accord dt:nth-of-type(1) + dd h2{color:red}
   .accord dt:nth-of-type(2) + dd h2{color:green}
   .accord dt:nth-of-type(3)+ dd h2{color:blue}

Do note that there is no support for IE8 or under for this. :confused:

Also note that commenting BETWEEN tags confuses IE. Maybe you could do :

<dt><!--4th SLIDE--></dt>

ALSO: you have some poorly formatted tags there (BRs, close P for no open P?)… I recommend this:

<div class="callout x1"><h2>Welcome</h2><a href="#" class="more">More</a></div>

or maybe you meant…

<div class="callout x1"><h2>Welcome</h2>
<p> some text...sometext....some text...<a href="#" class="more">More</a></p></div>

But if you didn’t, then that div is necessary too and this would do the job :

<h2  class="callout x1">Welcome<a href="#" class="more">More</a></h2>

Hope that helps!

3

Works a charm, DP. Thanks a ton!

4

I’d also be asking what makes that a definition list and what makes those H2’s? They don’t appear to be starting new sections, and you have empty terms…

though that they are “slides” is setting off my ‘pointless space-waster’ sense.

5