Using CSS to style links within specific tags (header, nav, article, footer) without classes or id's?

Question

I am trying to style some links in my navbar. Since I am using html5, I have placed the links within the standard <nav> and then a <ul> and then <li> tag. How would I style only the links within the <nav> <ul> <li> tags (I'm guessing with pseudo classes)?

I have thought of the following but to no avail:

nav ul li a:link, a:visited {}
nav a:link, a:visited {}

I know that I could be using classes and id's but I wanted to know if I could do it without them since I will probably only have one <nav> tag in the whole page with an unordered list inside of it. If you could let me know if it is possible without using classes and id's that would be great.

Answer 1

http://jsfiddle.net/S9RG8/ Here's a JS fiddle showing a working example of how to select all of the pseudo elements of an anchor within a ul within a nav tag.

This should work for you, but if not you may want to include an HTML5 shiv in your header to ensure that the browser you're working with supports HTML5 elements. code.google.com/p/html5shiv/

Hope this helps

Answer 2

Maybe just use a to style the link as a whole. Now you got no styling if this link is active or hovered. After that you can add specific styles for visited or hovered links.