Issue with HTML5, CSS3, and site navigation.

Rate this article

A while back, it was suggested that limiting links to anchor tags (a) should be avoided in HTML5. It was declined due to backward compatibility issues and also because it would be difficult to implement. Not only that, but no one could bring forward a test case where using a different tag as a link was necessary. Well, I believe I have found one, and I am curious as to whether anyone has a solution.

The File

<!DOCTYPE html>
<html>
<head>
 <style type="text/css">
 html, body {
 margin:0;
 padding:0;
 }
 nav {
 display:block;
 clear:left;
 background:#111;
 color:#fff;
 font-family:sans-serif;
 padding:.4em 1.85em;
 }
 nav ul {
 margin:0;
 padding:0;
 font-size:.8em;
 position:relative;
 }
 nav ul:before {
 display:block;
 float:left;
 content:"Navigation";
 padding:.3em 1.85em .3em 0;
 font-style:italic;
 color:#999;
 }
 nav ul:after {
 display:block;
 float:left;
 content:"Because I wanted to play with CSS content";
 padding:.3em 0 .3em 1.85em;
 font-style:italic;
 color:#999;
 }
 nav ul li {
 display:block;
 float:left;
 }
 nav ul li:last-child a {
 border-right:1px dotted #777;
 }
 nav ul li a:link, nav ul li a:visited {
 display:block;
 float:left;
 padding:.3em 1.85em;
 color:#fff;
 background:#111;
 border-left:1px dotted #777;
 }
 nav ul li a:hover, nav ul li a:focus, nav ul li a:active {
 color:#ccc;
 background:#111;
 text-decoration:none;
 outline:0;
 }
 nav ul li:hover a {
 border-left:1px solid #777;
 border-right:1px solid #777;
 background:#111;
 color:#bbb;
 }
 nav ul li:hover + li a {
 border-left:0px solid #777 !important;
 }
 nav:after {
 display:block;
 content:" ";
 clear:left;
 }

 a:link, a:visited {text-decoration:none;}
 a:hover, a:active, a:focus {text-decoration:underline;}
 </style>
</head>
<body>
 <nav>
 <ul>
 <li><a href="/">Home</a></li>
 <li><a href="/about/">About</a></li>
 <li><a href="/contact/">Contact</a></li>
 </ul>
 </nav>  
</body>
</html>

The Problem

The code nav ul li:hover + li a works nicely to remove the border of the link next to the link being hovered over, but this cannot work with focus or active. I tried nav li a:hover + li a, but as I’m sure you know, it does nothing because there is no li after the a:hover. The section I’m referring to is Home</a></li><li>. Because of the li containing the link is closed, the next li is not considered the next element. I understand why it is this way, but is there a way around it?

In short, I want to be able to use nav ul li a:focus [somecharacterperhaps] li a to change the styles of the link in the following li.

Rules

The navigation must remain in an unordered list
It is preferred that the HTML does not change at all (only CSS)
I must be able to change the styles of the following link when focusing on a link (change styles of About when focused on Home)

Solution

As of yet, there is no solution. I will post the solution(s) here if they pass my requirements.

Tags: CSS3, HTML5

This entry was posted on Friday, December 4th, 2009 at 3:28 pm and is filed under Conundrum. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “Issue with HTML5, CSS3, and site navigation.”

Tab Atkins Says:
January 4th, 2010 at 8:48 am
Eventually (I keep pushing for it), you’ll be able to do “nav ul li:has(a:focus) + li a”. It keeps being rejected for very reasonable performance reasons (it completely breaks the optimizations browsers have in place for matching selectors to content as the page loads), but eventually it’ll show up because it’s just too damned useful.
Brandon Frohs Says:
January 4th, 2010 at 8:54 pm
You’re absolutely right, it would be extremely useful. Sadly, though, I don’t see this being implemented for at least five years. At least block level content is allowed inside of anchors now… if only a similar solution was available for list items. I guess only time will tell.

Brandon Frohs