CODEWITHSUNDEEP
javascriptcsshtml
user3411839
user3411839

Reputation: 1

Partially remove hyperlink using css

I have two divs I want to remove hyperlink underline from the the first div and second show it with hyperlink. I did those chages using css file and code is below

a:hover, a:visited, a:link, a:active{
   text-decoration: none;
   color:#000000;
}

When I use above code it effect to all hyperlinks but i want to remove hyperlink only from class home and class about only. Could you please give me solution? the div tags are

<div>
<ul>
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About</a></li>
</ul>
</div>
<div>
<ul>
<li class="clients"><a href="#">Clients</a></li>
<li class="contact"><a href="#">Contact Us</a></li>
</ul>
</div>`

Upvotes: 0

Views: 108

Answers (3)

felicete
felicete

Reputation: 63

You should add class selectors only for "home" and "about" links by specifing class selectors:

.home a,
.about a {
   text-decoration: none;
   color:#000000;
}

because your rule

a:hover, a:visited, a:link, a:active{
    text-decoration: none;
    color:#000000;
}

applies text-decoration: none to all <a> elements on the page.

Upvotes: 0

marquex
marquex

Reputation: 63

You should use the classes before the link declaration like this:

.home a:hover, 
.home a:visited, 
.home a:link, 
.home a:active,
.about a:hover, 
.about a:visited, 
.about a:link, 
.about a:active{
  text-decoration: none;
  color:#000000;
  cursor: pointer;
}

cursor:pointer change the hiperlink 'hand' cursor for the standard arrow.

Upvotes: 1

Albzi
Albzi

Reputation: 15609

You can do it a few ways:

.home a, .about a{
  text-decoration:none;
}

ul:first-of-type li a{
  text-decoration:none;
}

You don't need to add any :link, :active :visited as just plain a will grab everything.

You can go further and add some other styles to make it look like 'normal' text.

color:#000000 /*black text*/
cursor:pointer; /*normal arrow cursor*/

Upvotes: 0

Related Questions