Hightlighting the link of the current page

Question

I'm having trouble highlighting the currently selected link on the displayed page. I'm using HTML5 and CSS only. I've found that it works when I change id in every html-document to "currentLink", but only by using the traditional class/id like so:

#y.x {
   /* will select element of id="y" that also has class="x" */
}

However, to make the entire link element clickable, I have used "nav", which seems to be incompatible with the solution above.

This is my index page HTML:

        <nav>
            <div id="currentLink" class="buttons">
                <a href="index.html">Om oss</a>
            </div>
            <div id="buttonVarahundar" class="buttons">
                <a href="">Våra hundar</a>
            </div>
            <div id="buttonValpar" class="buttons">
                <a href="">Valpar</a>
            </div>
            <div id="buttonKontakt" class="buttons">
                <a href="contact.html">Kontakt</a>
            </div>          
        </nav>

And the CSS:

nav a {
    display: block;
    width: 25%;
    height: 3em;
    float: left;
    padding-top: 8%;
    padding-right: 0%;
    padding-bottom: 4%;
    padding-left: 0%;   
    background-color: #CCFFCC;  
    box-shadow: 0.2em -0.2em 10px #303030;          
    border-radius: 1em 1em 0 0; 
}

nav a #currentLink .buttons {
    background-color: #E0FFFF;      
    box-shadow: 0.2em -0.2em 10px #303030, 0 0.2em #FFFFFF;
}

What I'm doing is replacing some colours and shadow to create the visuals that I want. Do you have any idea how this can work with the first method, but not my own?

Answer 1

replace

nav a #currentLink .buttons {

by

nav div#currentLink.buttons a {

Answer 2

The spaces in the selector represent different elements

" #page1 nav a " will select all links (a), that have parent element nav , that are located in element with ID page .

All this selectors will work for your case:

<style>
nav div#currentLink.buttons a {...}
nav #currentLink.button a {...}
nav #currentLink a {...}
div#currentLink.button a {...}
#currentLink.button a {...}
#currentLink a {...}

In general you should use ID ( # ) for elements that are unique on your page like:
" #logo , #heade , #main-menu , #unicorn ".
Classes ( . ) are used for markups and commonly repeated elements:
" .button , .title .selected "

to keep your css clean and readable try to construct selectors with "closest 'Named' element(with ID) + the shortest possible UNIQUE combination of classes and elements selectors"

so in the from the above examples #currentLink a is the perfect selector for the job.

Answer 3

you can add a class to the link that is currently selected:

<nav>
<div id="currentLink" class="buttons">
<a href="index.html" class="active">Om oss</a>
</div>
<div id="buttonVarahundar" class="buttons">
<a href="">Våra hundar</a>
</div>
</nav>

So the CSS for the links would be:

nav a {
/* your styles */ 
}

And some CSS for the selected link, when every selected link should look the same:

nav a.active {
/* your styles */
}

When every selected link should look different, you will have to get more specific:

#currentlink a.active {
/* Styles for #currentlink when it is the selected*/
}
#buttonVarahundar a.active {
/* Styles for #buttonVarahundar when it is the selected link */
}