CODEWITHSUNDEEP
htmlcss
abcid d
abcid d

Reputation: 2953

Using CSS to Highlight Current Page

I want to highlight current page by using CSS, but somehow it doesn't work. Please take a look at my code below.

HTML

    <body id="home"> 
<div id="mainNav">
        <a href="/Dashboard/Index" id="navIndex">
           <div class="circle text-uppercase">
              <div class="icon23X27"><img src="~/Content/icons/dashBoard.png" width="23px" height="27px" align="middle" /></div><span class="textStyle">Dashboard</span>
          </div>    
       </a>

       <a href="/samples/register/" id="navRegister">
          <div class="circle text-uppercase">
             <div class="icon23X27"><img src="~/Content/icons/samples.png" width="23px" height="27px" align="middle" /></div><span class="textStyle">Sample Registration</span>
            </div>   </a>

      <a href="/samples/search/"> 
        .........
</div>

CSS

body#/samples/register a#navRegister .textStyle {
    background-color:red !important
}

Upvotes: 2

Views: 151

Answers (2)

Toni Leigh
Toni Leigh

Reputation: 4969

Take your body ID, in this case #home and combine it with the id on the home nave element, in this case #navIndex:

#home #navIndex .textStyle {
    background-color: red;
}

Then you can add a selector for each of your pages to catch the current page in the nav with css alone:

#home #navIndex .textStyle,
#register #navRegister .textStyle {
    background-color: red;
}

Drop the !important it's only necessary in a couple of edge cases in css and should be avoided (I appreciate one of those edge cases is just trying to definitely make a selector show some visible effect, which may well be what you're doing with the posted css).

You'd also benefit from using classes instead of ids as css selectors.

Caveat:

It's probably better to render this in the html server side as the server can use the request URL to decide which nav item is current. That way you can just add a selected-nav-text class to your current nav span and your css becomes:

.selected-nav-text {
    background-color: red;
}

This is simpler, you can write logic once server side to calculate the current nav and css once to highlight it, then when you change your nav the functionality will come instantly.

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167240

The syntax is wrong. Use this way:

body a#navRegister[href="/samples/register"] .textStyle {
    background-color:red !important
}

Yours is a worst example of having div inside <a>, which is similar to having a bottle inside some water, not water inside bottle, which is right one.

Upvotes: 3

Related Questions