Having problems defining CSS tags in context

Dev Shed Forums Sponsor:

February 3rd, 2003, 11:36 PM

colpaarm

300lb Bench!

Join Date: Aug 2001

Location: New York

Posts: 2,343

Time spent in forums: 5 Days 10 h 50 m 4 sec
Reputation Power: 60

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.

February 4th, 2003, 03:30 AM

MJEggertson

Contributing User

Join Date: Jan 2002

Location: Seattle WA

Posts: 863

Time spent in forums: 22 sec
Reputation Power: 13

Re: Having problems defining CSS tags in context

Quote:

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.

February 4th, 2003, 09:04 AM

Tuxie

Contributing User

Join Date: Apr 2002

Location: Inside the GNU/Hurd kernel

Posts: 492

Time spent in forums: 2 h 1 m
Reputation Power: 12

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.