If link is selected, turn opacity down for rest of links

Question

I have a list of links, and as the title says I want to lower the opacity of all the links except the selected one. So if All is selected, Links1,2,3 should dim. If Link1 is selected, links All,Link2,3 should dim.

<nav class="primary">
      <ul>
        <li><a href="#" class="selected">All</a></li>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
      </ul>
</nav>

css

nav.primary ul li a.selected {
    color:#e2e2e2;
    border-bottom: 1px solid #004672;
}

This is what I had in mind, although it doesn't work since it's incorrect(and I suppose it would lower the opacity of the selected one, too):

nav.primary ul li a.selected > nav.primary ul li a {
       opacity:0.5;
}

Answer 1

UPDATED

Just change the order you declare the CSS rules:

nav.primary ul li a {
    opacity:0.5;
}
nav.primary ul li a.selected {
    color:#000;
    border-bottom: 1px solid #004672;
    opacity:1;
}

I've changed the selected link color and also added some jQuery, but just for you to be able to see it working. What you need is just the CSS bits.

Example: http://jsfiddle.net/Cx3ww/1/

Answer 2

Here is a codepen with what you want to achieve, css only no Javascript

Answer 3

Fiddle: http://jsfiddle.net/h5aHg/

You can use rgba color values instead of opacity:

nav.primary ul li,
nav.primary ul li a {
    color: rgba(210, 210, 210, .5);
}

nav.primary ul li a.selected {
    color: rgba(210, 210, 210, 1);
}

Answer 4

Try adding an additional class to your ul when a link is selected

<nav class="primary">
      <ul class="selectedList">
        <li><a href="#" class="selected">All</a></li>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
      </ul>
</nav>

css :

nav.primary ul.selectedList li a {
    opacity:0.5;
}
nav.primary ul.selectedList li a.selected {
    color:#e2e2e2;
    border-bottom: 1px solid #004672;
    opacity: 1;
}