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.

Modest

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

Mairemaise

If I understand you correctly, since the anchors are nested within the list items, they are not actually adjacent...correct? So then why doesn't something more specific...like the following nested selector work? ul li a.class:link + ul li a:link {blah blah blah} – Modest

Yes, as they are not siblings your selector doesn't select the element, can you show me(maybe in a demo) that how does your nested selector work? – Mairemaise

I'll save you the trouble. What I hadn't tested was nested paragraphs or other elements inside list items, and those don't work either. For example, if I nest a paragraph inside a list item, the adjacent sibling combinator doesn't work as desired. The adjacent sibling combinator simply must not work across nested elements, and that is my problem. Thank you for leading me to this conclusion. I believe jquery is the answer in this situation. – Modest

Answer 2

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.

It's possible, as you already stated there is the css approach of using target selectors, I, however, would go for a jQuery solution to monitor your anchor state, for the approach below to work, it's necessary to append an id to your anchor exact like your href hash, like:

<a href="#myanchor" id="myanchor">My anchor</a>

You can then simply monitor the hashchange event from the $(window) object by binding a function to the referred event, like:

$(window).bind('hashchange', function(e) {

            var page = window.location.hash; // page = #myanchor
            $(page).doMyCssStuff(); //
        });

This is a nice way for example to add a navigation style, if the user hits "back" on it's story, the above script would simply do your css stuff to the exact anchor it's meant to.

I hope it helped. Cheers

Window

Answer 3

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')
})

Sandhi

Mine looks very similar. This is probably the simplest option now that I see it. Thanks! – Modest

Answer 4

Support undefined's answer. If you want to use only css, you can just toggle the class on the li instead of the a element. Then it would be easy enough: li.active + li a { background-color:red }

Literally, it means: target the a element inside the li next to the one with "active" class.

Amphiboly

I will certainly give that a try, but I'm not positive it will work considering the styling I've done so far. Thank you! – Modest

Well, it's easier to change than imagined. If you have all your styles defined on a.active, just change the selector to li.active a. – Amphiboly

I will definitely try...for some reason I think I already tried that and something stopped me...there is a lot more to the code than previously mentioned. Thanks again! – Modest