Question

I have few <asp:LinkButton>‘s in my website menu bar. The menu bar and these buttons have Css set. What I am looking for is to highlight the button corresponding to which ever page is active.

I could apply a new Css class dynamically to my Linkbuttons(rendered as anchor tags by the browser) but the newly applied CSS is overridden by the existing class. I have tried analyzing any mistake there but no luck. This is my code-

A part of HTML-

<ul class="navigation">
   <li>
       <asp:LinkButton ID="lbtn_about" runat="server" OnClick="lbtn_about_Click">About Us</asp:LinkButton>
   </li>

Existing css-

 ul.navigation li a
  {
    text-decoration: none;
    display: block;
    color: #838383;
    height: 24px;
  }

Css class to be set dynamically-

.activeLink
  {
    color: #588500;
  }

In my page loads I am doing this-

LinkButton lb = (LinkButton)Page.Master.Master.FindControl("lbtn_about");
lb.CssClass = "activeLink";

HTML rendered in browser-

<a id="ctl00_ctl00_lbtn_about" class="activeLink" href="javascript:__doPostBack('ctl00$ctl00$lbtn_about','')">About Us</a>

Its clear that the class is set, but the activeLink css is overridden by the ul.navigation li a. Suggestions please.

Answer 1

This is because ul.navigation li a is more specific than .activeLink.

If you think about a point system an element say ul has 1 point, a class say navigation has 10. Therefore the ul.navigation li a has at least 11 points on just the ul.navigation vs the activeLink of 10.

A good detailed article on css specificity!

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html“>

As for a solution you just need to reference your .activeLink with more specificity, be it with an #id or a ul.navigation li a.activeLink.

Go forth and may the css be with you!