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

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 2

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 3

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

Answer 5

^{Disclaimer : sorry I won't be testing this, just throwing some ideas.}

Since image is actually the first element, here's an alternative simple idea, if you haven't figured any yet:

<div class="Outer">
 <img src='image123.jpg' />
</div>
<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 Clinica</a>
</div>

It shouldn't affect img since it's just bold.

---

Another approach would be modifying just the CSS and not touching the HTML:

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

That will affect every child from Outer, but I believe it would work in this case if there's nothing more inside Outer.

---

The best thing to do, whoever, would be one different div for each group of elements. In this case, it would be something like this:

CSS

.Outer {font-size:10pt;}
.Outer-Head {boder:0;}
.Outer-Body {font-weight:none;}
.Outer-First {font-weight:bold;} 

HTML

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

It will give you best results. Just take a look at StackOverflow source on how it's done. It's very smooth.