[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1764
  • Last Modified:

How do make subclasses of anchor tags in CSS file?

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?
0
joshuadavidlee
Asked:
joshuadavidlee
  • 2
1 Solution
 
SheharyaarSaahilCommented:
a.second:link {
      formatting goes here
}

a.second:visited{
      formatting goes here
}

a.second:hover {
      formatting goes here
}

then apple the class="second" to the links which you want to behave differently
0
 
Mark StegglesWeb DeveloperCommented:
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
0
 
SheharyaarSaahilCommented:
<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>
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now