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

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*