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.

Ram · Accepted Answer · 2012-10-27T23:47:37.613

3

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

edited Oct 27 '12 at 23:47

answered Oct 27 '12 at 23:39

Ram

143,282
16
168
197

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} – table_formatter Oct 28 '12 at 01:44
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? – Ram Oct 28 '12 at 02:00
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. – table_formatter Oct 28 '12 at 03:17

Bruno Vieira · Answer 2 · 2012-10-27T23:53:40.750

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

score 2 · Answer 3 · answered Oct 27 '12 at 23:46

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

answered Oct 27 '12 at 23:46

charlietfl

170,828
13
121
150

Mine looks very similar. This is probably the simplest option now that I see it. Thanks! – table_formatter Oct 28 '12 at 01:52

score 2 · Answer 4 · answered Oct 28 '12 at 00:43

2

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.

answered Oct 28 '12 at 00:43

Devon Ville

2,001
2
19
32

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! – table_formatter Oct 28 '12 at 01:49
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. – Devon Ville Oct 28 '12 at 02:04
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! – table_formatter Oct 28 '12 at 03:02

CSS navigation list -- next link selector sibling combinator

4 Answers4