Style links but not all links

[Hiker]

I thought this would be easier than it's turning out to be.

I want to style a few links on a page but don't want the style to interfere with navigation links. Here's the code that I want to use but it seemed to interfere with the navbar links.

 

<style>

a:link {
  color: #616161;
}
a:visited {
  color: #616161;
}
a:hover {
  color: #8BD448;
}
a:active {
  color: #2AA8F2;
}

</style>

 

 

[shaili_shah]

Instead of passing <a> tag in css you can give the class or ID to the specific link that will be style.

And pass that selector in css.

Ex:-

Suppose you have a link like: <a href="#" class="abc">Hyperlink</a>

<a href="#" class="abc">Anchor tag</a>

<a href="#" >Navbar Link</a>

CSS would be like:

<style>

.abc:link {
  color: #616161;
}
.abc:visited {
  color: #616161;
}
.abc:hover {
  color: #8BD448;
}
.abc:active {
  color: #2AA8F2;
}

</style>

This will be styled the only link which has the class name "abc".

Hope you get it.

Thanks!

Edited December 11, 2020 by shaili_shah

[dsonesuk]

Give nav links specific class name as in .navlinks then try

a:hover:not(.navlinks){

}

Should work.

[Hiker]

4 hours ago, shaili_shah said:

Instead of passing <a> tag in css you can give the class or ID to the specific link that will be style.

And pass that selector in css.

Ex:-

Suppose you have a link like: <a href="#" class="abc">Hyperlink</a>

<a href="#" class="abc">Anchor tag</a>

<a href="#" >Navbar Link</a>

CSS would be like:

<style>

.abc:link {
  color: #616161;
}
.abc:visited {
  color: #616161;
}
.abc:hover {
  color: #8BD448;
}
.abc:active {
  color: #2AA8F2;
}

</style>

This will be styled the only link which has the class name "abc".

Hope you get it.

 

That worked.

At one point I was close, only a . away!

Thanks!

[Hiker]

51 minutes ago, dsonesuk said:

Give nav links specific class name as in .navlinks then try

a:hover:not(.navlinks){

}

Should work.

Thanks, I appreciate the help!