Hover not working inside an <a href> tag

Question

I'm fairly new to HTML/CSS so excuse me if this is a simple question but my a:hover (using an id and not a class) isn't working inside an a href tag but when I use it in a th tag it does.

HTML

<a href='http://www.example.com' id='link1'>Example Text</a>

CSS

#link1 a:hover {
text-decoration: none;
color: #E0E0E0;
}

The thing is that if I put it in a div and set it as a class instead of an id, it works but then moves the rest of the links afterward down a line on the page.

Answer 1

That's because you're trying to find an anchor link WITHIN the id 'link1' while link1 IS the anchor link. Try this:

a#link1:hover {
  text-decoration: none;
  color: #E0E0E0;
}

http://jsfiddle.net/kF8ey/

Answer 2

Your selector is incorrect. Try this:

#link1:hover {
  text-decoration: none;
  color: #E0E0E0;
}

By using: #link1 a:hover , your telling your code too look for a link named #link1 and then look for an anchor tag inside of it. Clearly you just want #link1 itself.

Soultion in a fiddle: http://jsfiddle.net/9GXg8/