#1
  1. 300lb Bench!
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Aug 2001
    Location
    New York
    Posts
    2,353
    Rep Power
    62

    Having problems defining CSS tags in context


    I'm trying to make a simple href definition work in two different situations. In other words, when I create an href in most situations, I want it to have one definition, when I create it within a <p> tag, I want it to have a different one. So I read up and came up with

    a:link {
    text-decoration: none;
    font: 12px verdana, sans-serif;
    color: #000000
    }

    p a:link {
    color: #000000;
    text-decoration: none;
    font: 11px verdana, sans-serif;
    }

    which works fine, except that when I hover over a link I want to be able to control that style as well. For whatever reason, I'm having problems doing this. I've noticed that the order of things seems to affect things. So

    a:link {
    text-decoration: none;
    font: 12px verdana, sans-serif;
    color: #000000
    }
    a:visited {
    text-decoration: none;
    font: 12px verdana, sans-serif;
    color: #000000
    }
    a:hover {
    text-decoration: underline;
    font: 12px verdana, sans-serif;
    color: #000000
    }

    may work fine, but if I put the visited tag first, it may not. For whatever reason, I can only control the <p> version of a:link (can't control a:hover or a:visited). Any help would be greatly appreciated. Thanks in advance.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14

    Re: Having problems defining CSS tags in context


    Originally posted by colpaarm
    ...when I create an href in most situations, I want it to have one definition, when I create it within a <p> tag, I want it to have a different one...
    CSS does define a way to do this, it's called selectors, but it isn't supported in any of the old browsers (Netscape6, any flavor of Explorer...). So for now, you'd best use two different classes.
    Code:
    <html>
      <head>
        <style type="text/css">
          a.one:hover{color:red;}
          a.two:hover{color:green;}
        </style>
      </head>
      <body>
        <a href="http://google.com" class="one">google</a><br />
        <a href="http://google.com" class="two">google</a>
      </body>
    </html>
    Just define your hover, visited, etc pseudo-classes for each class of anchor and you'll be fine.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2002
    Location
    Inside the GNU/Hurd kernel
    Posts
    492
    Rep Power
    13
    CSS selectors work just fine in Opera,Konqueror,IE for Mac and Mozilla.IE's support for CSS just sucks,just use the CSS 2 selectors and it will work in all the decent browsers.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    Point is though, that it won't work for 90% of the people who visit your page.

    Use code that works, not necessarily what is best.
  8. #5
  9. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    CSS does define a way to do this, it's called selectors....
    Might want to read this...
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    I've often wondered, what is the difference between a child selector and descendant selector? That is,
    Code:
    body a{color: red;}
    body>a{color: red;}
    Seem to define the same thing to me, save for the second one only works in the newer browsers.
  12. #7
  13. No Profile Picture
    CF sMod
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Location
    Maine, USA (a.k.a. Boonies)
    Posts
    242
    Rep Power
    15
    body>a selects only immediate descendants, while body a selects all descendants.
    Jason Contact Me
    Super moderator @ CodingForums
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    Right...thanks.
  16. #9
  17. 300lb Bench!
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Aug 2001
    Location
    New York
    Posts
    2,353
    Rep Power
    62
    Thanks immensely for the help guys!

IMN logo majestic logo threadwatch logo seochat tools logo