Using css child selector

Question

I am trying to apply css on the first A element inside .Outer,

 .Outer > a:first-child {font-weight:bold}

doesn't work. Why?

<div class="Outer">
 <img src='image123.jpg' />
 <a href="Default.aspx?ID=4083" id="ctl00_CPH_Main_Rep_List2_ctl03_HyperLink1">John Johnsson</a>
 <a href="../Users/ViewList.aspx?module=Occupation&amp;ID=70">Doctor</a>
 <a href="../Workplaces/Default.aspx?ID=31">Mayo Clinica>
</div>

Answer 1

try it without the angle bracket. also, the :first-child pseudo class isn't recognized by all browsers.

it's also possible that your CSS is being overridden by an existing rule. use firebug in firefox to see exactly what styles are being applied.

Answer 2

What you are doing will only work if the first child of your div.Outer was an a element. :first-child does exactly what it says, it only matches an element if that element is the first child of something.

Unfortunately, I don't think there is any way to select only the first matching child element of an element using CSS only.

Answer 3

It's because <a> isn't the first child, <img/> is. What you're looking for is .Outer > a:first-of-type or .Outer > a:nth-child(2). Take not these "more advanced" selector don't work in all browsers *coughIEcough*

Answer 4

Because the first child is the image, this would work:

<div class="Outer">
 <a href="Default.aspx?ID=4083" id="ctl00_CPH_Main_Rep_List2_ctl03_HyperLink1">John Johnsson</a>
 <a href="../Users/ViewList.aspx?module=Occupation&amp;ID=70">Doctor</a>
 <a href="../Workplaces/Default.aspx?ID=31">Mayo Clinic</a>
</div>