We help IT Professionals succeed at work.

New podcast episode! Our very own Community Manager, Rob Jurd, gives his insight on the value of an online community. Listen Now!

x

How do make subclasses of anchor tags in CSS file?

joshuadavidlee
on
2,047 Views
Last Modified: 2012-05-05
if i use a:hover I can make ALL  my rolled over hyperlinks look however I want, but I have several different hyperlinks that I want to look different.  Can I make sub classes of a in my css files?
Comment
Watch Question

CERTIFIED EXPERT
Expert of the Year 2004
Top Expert 2004
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Mark StegglesWeb Developer
CERTIFIED EXPERT
Top Expert 2006

Commented:
yes you can

for instance:

<a class="redlink" href="">link</a>

css:

a.redlink {color:red;}
a.redlink:hover {color:pink}


OR

if the links that you want to change are on a certain area of the page, you can use a descdendancy selector:

<div id="leftsection">
<a href="">link</a>
</div>

css:

div#leftsection a {color:red}
div#leftsection a:hover {color:pink}



Steggs



Cheers
Steggs
CERTIFIED EXPERT
Expert of the Year 2004
Top Expert 2004

Commented:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
a:link {
      font-family: Tahoma;
      font-size: 12px;
      font-weight: normal;
      color: #990000;
      text-decoration: none;
}
a:visited {
      font-family: Tahoma;
      font-size: 12px;
      font-weight: normal;
      color: #990000;
      text-decoration: none;
}
a:hover {
      font-family: Tahoma;
      font-size: 12px;
      font-weight: normal;
      color: #990000;
      text-decoration: underline;
}
a.second:link {
      font-family: Tahoma;
      font-size: 12px;
      font-weight: bold;
      color: #0000FF;
      text-decoration: none;
}
a.second:visited {
      font-family: Tahoma;
      font-size: 12px;
      font-weight: bold;
      color: #0000FF;
      text-decoration: none;
}
a.second:hover {
      font-family: Tahoma;
      font-size: 12px;
      font-weight: bold;
      color: #0000FF;
      text-decoration: underline;
}
-->
</style>
</head>

<body>
<p><a href="http://www.google.com">Google</a></p>
<p><a href="http://www.yahoo.com" class="second">Yahoo</a></p>
</body>
</html>
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.