CODEWITHSUNDEEP
csscss-selectors
Joseph
Joseph

Reputation: 1744

CSS :first-child selector

How come both links get bold with this setup?

I would like that only the a-tag just below the li.current get bold.

CSS

.ul li.current a:first-child{
    font-weight:bold;
}

Html

<ul>
  <li class="current">
    <a href="">This link</a>
      <ul>
        <li>
          <a href="">Not this</a>
        </li>
      </ul>
  </li>
</ul>

Upvotes: 0

Views: 921

Answers (2)

Blieque
Blieque

Reputation: 675

If the website isn't that dynamic, you might be able to get away with adding style="font-weight:bold" to the <a> tag you want bold. This will also let you make any links you like bold whenever. It is outside of the style-sheet though.

Upvotes: 0

j08691
j08691

Reputation: 208022

Use:

ul li.current > a:first-child{
    font-weight:bold;
}

jsFiddle example

The > refers to the immediate child. So while your rule was being applied to any anchor that was a child, the above rule only applies to the immediate children of ul li.current. Note that you may also be able to drop the :first-child part depending on how you want your links formatted.

Also note that in your code you have .ul where you probably just wanted ul as is in my example.

Upvotes: 4

Related Questions