Multiple Link Rollovers By Div Id?

Posted on 2011-04-25
Last Modified: 2012-05-11
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?

Question by:greddin
    LVL 13

    Accepted 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.

    Author Closing Comment

    Thank you, I didn't realize it was that simple.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now