CSS navigation list -- next link selector sibling combinator

Question

I am attempting to create a simple 3d effect on my nav buttons using border colors. My buttons are simply comprised of an unordered list with background color, border colors, and text padding, and of course links, so the links are nested in the typical way like so:

<ul>
<li><a class="active"   href="link1.html">link1</a></li>
<li><a class="inactive" href="link2.html">link2</a></li>
<li><a class="inactive" href="link3.html">link3</a></li>
..etc
</ul>

I am using jquery to change the anchor classes on click to change their look.

What I would like to do is use css (or even jquery I guess) to specifically target the anchor that follows the 'active' link, but I'm not sure if it's possible.

I've tested the use of the " h3 + p { " type of selector and I understand how that works, but it seems to stop functioning as soon as I try to target links.

I've tried:

a.active + a {background-color:red}

and...

a.active:link + a:link {background-color:red}

and other variants of specificity...

li a.active:link + a:link {background-color:red}

ul li a.active:link + a:link {background-color:red}

ul li a.active:link + a.inactive:link {background-color:red}

...etc.

This obviously works:

p.active + p {background-color:red}

... so why doesn't this?

a.active + a {background-color:red}

So basically I'm trying to figure out why I can't get the sibling combinator to work with links, and if there's a solution or workaround.

Answer 1

You are using Adjacent sibling combinator, as your anchor links are not siblings your selector doesn't select the element.

E + F: an F element immediately preceded by an E element

As you are using jQuery you can select the element this way:

$('a.active').parent().next().children('a').addClass('red')

http://www.w3.org/TR/selectors/#adjacent-sibling-combinators

Answer 2

In jQUery can target next link and add a class to it easily

Assuming your click handler looks like this:

$('#linkList a').click(function(){
    $('a.active').toggleClass('active').toggleClass('inactive')
    $('a.redClass').removeClass('redClass')
    $(this).toggleClass('active').toggleClass('inactive').parent().next().find('a').addClass('redClass')
})