CODEWITHSUNDEEP
csscss-selectors
David Thorisson
David Thorisson

Reputation: 1033

Using css child selector

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>

Upvotes: 1

Views: 3006

Answers (5)

cregox
cregox

Reputation: 18406

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.

Upvotes: 0

heisenberg
heisenberg

Reputation: 9759

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>

Upvotes: 0

casraf
casraf

Reputation: 21694

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*

Upvotes: 3

Sean
Sean

Reputation: 4470

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.

Upvotes: 0

Jason
Jason

Reputation: 52547

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.

Upvotes: 0

Related Questions