HTML 5 NAV links picking up other link colors

[Lorel]

How do I prevent light blue NAV links for the menu with a dark blue background from picking up regular link colors on the same page (dark blue links on a white background)?

The NAV links in the menu are picking up the dark blue of the other links (which makes them invisible due to the dark blue background).

I searched the internet several times and can't find a solution for this problem with NAV and HTML5.

Here is the relevant part of the CSS:

nav { background-color: #336699; }
nav ul li a { color: #99CCFF; ] /*lt blue*/
nav ul li a:hover { color: #FFCC33; } /*orange*/

a:link, a:visited {color: #336699; text-decoration: none;
background: transparent; }
a:hover, a:active {color: #336699; text-decoration: underline; }

Can anyone tell me how to fix this other than making a class for .nav? I'm trying to do everything in HTML 5 and CSS3.

[ronin]

You definitely shouldn't need to use a class in this situation.

1) Did you mean to have a closing square bracket in this line:

nav ul li a { color: #99CCFF; ] /*lt blue*/

2) The cascade in Cascading Style Sheets means that later (or more specific) rules overwrite earlier (or less specific) rules.

On that basis, to avoid confusion, it's a good technique to write more general rules earlier in the cascade and more specific rules later in the cascade.

Try this:

a, a:link, a:visited {color: #336699; text-decoration: none; background: transparent;}
a:hover, a:active {color: #336699; text-decoration: underline;}

nav {background-color: #336699;}
nav ul li a, nav ul li a:link, nav ul li a:visited {color: #99CCFF;} /*lt blue*/
nav ul li a:hover, nav ul li a:active {color: #FFCC33;} /*orange*/

[Marshall]

nav { background-color: #336699; }
nav ul li a { color: #99CCFF; ] /*lt blue*/
nav ul li a:hover { color: #FFCC33; } /*orange*/

If this is a direct copy/paste, then you have an error. You are closing with a ] rather than a } which will cause it not to read.

nav ul li a { color: #99CCFF; ]

Marshall

[Fotiman]

Your general rules are using pseudo-classes :link, :visited, :hover, and :active. Those will have a higher specificity than your nav rules, which currently use only element selectors. In other words, this:
a:link
is more specific than this:
nav ul li a

If you add those pseudo-element selectors to your nav links, that should solve your problem. And as others said, fix that closing brace.

[Lorel]

Sorry, when I posted this message it wasn't a copy/paste as I left out non-relevant details. It was a typo in this message only. The html and css is validated

I moved the more general link rules first and put the NAV rules last in the whole css except for media queries, and it didn't change anything. I removed the cache from the browser and refreshed it and also tried other browsers with empty caches and it didn't fix it.

I also tried removing the colored background on main menu so I can see what's happening. The hover state is also changing size when I have a set size for all link states on all levels in the NAV (15px). So it's still picking up link data from elsewhere.

I commented out the other links css entirely and then the menu links are the right size and color. So, when everything is NOT commented out, it's picking up the other link css even though it's above the NAV link.

Here is the Relevant link CSS - copy pasted.

a:link, a:visited {color: #336699;
font-weight: normal;
background: transparent;
text-decoration: none;
font-weight:normal;
font-size: 100%; }

a:hover, a:active {
text-decoration: underline; }

/*product links*/
.productlinks a:link, a:visited {color: #336699;
text-decoration: none;
font-size: 87.5%; }

.productlinks a:hover, a:active {
text-decoration: underline;
font-size: 87.5%; }


#footer { width:99.5%;
margin:0 auto;
padding:10px 0;
text-align:center;
font-size:1.000em;
line-height: 18px;
background:transparent; }


nav { text-align:center;
background-color: #336699; } /*dk blue bg*/

nav ul {
list-style: none;
margin: 0;
padding:0; }

nav ul li {
text-align: center;
display: inline-block;
position: relative;
font-size: 93.8%; } /*15px*/

nav ul li a {
padding: 0.313em 1.250em; /*5px 20px*/
color: #99CCFF; /*lt blue*/
text-decoration: none;
font-weight: bold;
display: block;
width: 8.750em; /*140px*/
font-size: 93.8% } /*15px*/

nav ul li a:hover {
color: #FFCC33; /*orange*/
font-size: 93.8%; } /*15px*/

nav ul ul {
display: none;
position: absolute;
top: 20px;
background-color: #336699;
z-index: 999; }

nav ul ul li {
min-width: 300px;
text-align:left;
font-size: 93.8%; } /*15px*/

nav ul ul li a {
min-width: 300px;
padding: 0.313em 0;
font-size: 93.8% } /*15px*/

nav ul li:hover > ul {
display: block;
font-size: 93.8% } /*15px*/

[Fotiman]

Per my post above, you just need to change this:

nav ul li a {
padding: 0.313em 1.250em; /*5px 20px*/
color: #99CCFF; /*lt blue*/
text-decoration: none;
font-weight: bold;
display: block;
width: 8.750em; /*140px*/
font-size: 93.8% } /*15px*/

To this:

nav ul li a:link,
nav ul li a:visited {
padding: 0.313em 1.250em; /*5px 20px*/
color: #99CCFF; /*lt blue*/
text-decoration: none;
font-weight: bold;
display: block;
width: 8.750em; /*140px*/
font-size: 93.8% } /*15px*/

[lucy24]

In other words, this:
a:link
is more specific than this:
nav ul li a

This may depend on browser interpretation, because I've also seen the opposite, where nested elements take precedence over pseudo-elements.

Either way: Does the nav element contain links which are not inside a list? ("ul li" is already redundant, since you're not going to have something lying around loose in the ul) If not, all you need to say is

nav a {blahblah}

creating one less place where the browser could potentially disagree with you. And less work for the browser, as it doesn't have to keep track of as many nests.

[Fotiman]

This may depend on browser interpretation

It better not! That would break the specificity model. :)

pseudo-elements are not the same as pseudo-classes, and pseudo-elements have a lower specificity than pseudo-classes.
pseudo-elements:

::after
::before
::first-letter
::first-line
::selection

pseudo-classes:

:active
:checked
:default
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited

[Lorel]

@fotiman.

thanks for reminding me that I need to specify visited in NAV as well as regular links. That fixed the link color problem.

however I shortened them to this:
nav ul li a:link, a:visited

I tried leaving out visited in both the nav and regular links, because I don't change anything on a visit, but then it picked up the default link colors.

[Fotiman]

however I shortened them to this:
nav ul li a:link, a:visited

Note, the selectors as you have them written there will apply to ALL a:visited, not just the ones under nav ul li. I don't know if that's what you wanted.

[lucy24]

pseudo-elements are not the same as pseudo-classes

Oops, my bad, forgot we're in html 5. Double colons vs. single.

Lorel, commas delimit entirely separate things, so
nav ul li a:link, a:visited
=
rule for
nav ul li a:link
AND
rule for
a:visited

So far, CSS doesn't come with parentheses, darn it. So there's no way to say
nav ul li (a:link, a:visited)

Do you really want :link and :visited to look the same?

[Lorel]

@lucy24

Yes, I want no changes for visited.

If I understand correctly, you are saying I should keep the nav ul in there i.e.,:

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

thanks

[Fotiman]

Correct. :)