[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 252
  • Last Modified:

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?

1 Solution

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.
greddinAuthor Commented:
Thank you, I didn't realize it was that simple.

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now