Multiple Link Rollovers By Div Id?

Let's say I have two DIV tags, each with their own content.  I'd like the (a href) links in DIV 1 to be red. I'd like to have the links in DIV 2 to be green. My DIV's are just defined like this right now:

<div id="test1"><a href="#">Link Test 1</a></div>

<div id="test2"><a href="#">Link Test 2</a></div>

Right now, my stylesheet has just this, which is all page inclusive.

a:link {
      color: #00A3E0;
      text-decoration: none;
}

a:visited {
      text-decoration: none;
      color: #00A3E0;
}

a:hover {
      text-decoration: underline;
}

a:active {
      text-decoration: none;
}

Is there a way to define these attributes to the DIV Id name?

Thanks.
greddinAsked:
Who is Participating?
 
jonahzonaConnect With a Mentor Commented:
Yes.

You would simply put the div ID in front of the a tag
#test1 a:link {
  Color: red;
}

#test2 a:link {
  Color: blue;
}

Open in new window


This way you can specify what elements styles are depending on where they are nested.
0
 
greddinAuthor Commented:
Thank you, I didn't realize it was that simple.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.