SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2001
    Location
    m
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    is there an easy way to have two style sets for links?

    hi,

    is there a way to have two different styles for different links on my page, without having to manually mark each link in the second group with a css tag?

    i'm building a website, and i would like the content section (located inside a cell) to have it's own style for links, so i redefined the a:link tag, with css,

    but i also want the links group in another cell to have it's own style, but then i got to define a a.links:link tag, and manually mark each and every link...

    isn't there an easier way?

    thanks

  2. #2
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes there is, using CSS selectors:
    Code:
    <style type="text/css">
    #first a {
      /* styles for all links inside element with id="first" */
      color: red;
    }
    #first a:hover {
      /* Hover styles for links inside that element
      color: orange;
    }
    #second a {
      /* Styles for links inside element with id="second"
      color: green;
    }
    #second a:hover {
      /* Hover styles for links inside element with id="second"
      color: blue;
    }
    </style>
    
    <div id="first">
    <a href="blah">A link</a>
    <a href="blah">Another link</a>
    <a href="blah">And another link</a>
    </div>
    
    <div id="second">
    <a href="blah">A link</a>
    <a href="blah">Another link</a>
    <a href="blah">And another link</a>
    </div>
    I've used divs here but it would work equally well with table cells that have their id set to something, or with other elements using classes if you use ".first a" as the selector.

    If you want to learn more about selectors (which is definitely a good idea, they are a fundamental thing to learn when dealing with CSS) check out this tutorial: http://www.westciv.com.au/style_mast...ial/selectors/

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2001
    Location
    m
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy



    it doesn't work...

    here is my code:

    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #first a {
      /* styles for all links inside element with id="first" */
      color: red;
    }
    #first a:hover {
      /* Hover styles for links inside that element
      color: orange;
    }
    #second a {
      /* Styles for links inside element with id="second"
      color: green;
    }
    #second a:hover {
      /* Hover styles for links inside element with id="second"
      color: blue;
    }
    </style>
    
    </head>
    
    <body bgcolor="#FFFFFF" text="#000000">
    <div id="first">
    <a href="blah">A link</a>
    <a href="blah">Another link</a>
    <a href="blah">And another link</a>
    </div>
    
    <div id="second">
    <a href="blah">A link</a>
    <a href="blah">Another link</a>
    <a href="blah">And another link</a>
    </div>
    
    </body>
    </html>

    i only see that the first links group is red, and doesn't change on the hover,
    and the second group of links is blue and also doesn't change on hover...

    what's wrong?

    btw, what's the difference between class and id's?
    untill now i've only known about and used class

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    UK
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    End your comments:

    Code:
    <style type="text/css">
    #first a {
      /* styles for all links inside element with id="first" */
      color: red;
    }
    #first a:hover {
      /* Hover styles for links inside that element */
      color: orange;
    }
    #second a {
      /* Styles for links inside element with id="second" */
      color: green;
    }
    #second a:hover {
      /* Hover styles for links inside element with id="second" */
      color: blue;
    }
    </style>
    Your code makes the browser think color:green is part of the #second A style comment, and ignores it, 'setting' it to default (blue).

  5. #5
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooops, that was a bug in my example code - Well spotted TechSited

  6. #6
    SitePoint Zealot
    Join Date
    Dec 2001
    Location
    m
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Thanks, so can i insert that code into a .css file?

    i know dreamweaver 4 can generate css, but can it generate id's also?

    what's the difference between class and id?

    i tried to change the #first a:hover
    to .first a:hover

    and mark a .first class tag on a link but it didn't work...

  7. #7
    Super Ninja Monkey Travis's Avatar
    Join Date
    Dec 2001
    Location
    Sioux City, Iowa
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you would change the code on the <div> tag to <div class="first"> instead of id. you wouldn't have to change anything in the link.
    Travis Watkins - Hyperactive Coder
    My Blog: Realist Anew
    Projects: Alacarte - Gnome Menu Editor


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •