Targeting first child div

HTML & CSS
1

Hi…

I am trying to target the first child div within a specific wrapper in my html, to give it different styling to others, but am having difficulties, wondering if anyone can assist.

At the moment, my html is as so…

<div id=“wrapper”>
<cfoutput query=“my query”>
<div>
#info#
</div>
</cfoutput>
</div>

So I have a query that loops through and outputs a seperate div for each database entry.

Now what i would like to do, is have the first div on the screen…i.e, the latest entry from my database with a different background colour to the other divs…

Essentially

#wrapper div:first {
background:blue
}

Any assistance would be appreciated…

Many thanks

2

If the DIV is the first element (not just the first DIV) within #wrapper, then you can use the first-child pseudoclass.

Otherwise, you can use the child selector:

#wrapper > div {
  background:blue
}

But if there are any other DIVs alongside it (siblings), they will be targeted too.

Also, these selectors aren’t supported by IE6.

If these will not work for you, the best idea is to simply give the DIV you want to target a class.

3

Yes, it was the first child pseudoclass i was looking for

Many thanks for your help