2

I am trying to edit the link states of a CSS class. I see from the W3 schools example, that if I want to change all links, I can form my website like so:

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: green;
  color: white;
}
</style>
</head>
<body>

<h2>Link Button</h2>

<a href="default.asp" target="_blank">This is a link</a>

</body>
</html>

However, I cannot figure out how to modify only some links in this way. I have tried a number of previous suggestions but nothing worked. Here is one example:

<!DOCTYPE html>
<html>
<head>
<style>
.foo a:link, a:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.foo a:hover, a:active {
  background-color: green;
  color: white;
}
</style>
</head>
<body>

<h2>Link Button</h2>

<a class="foo" href="default.asp" target="_blank">This is a button link</a>
<a href="default.asp" target="_blank">This is another link</a>

</body>
</html>

Any help would be appreciated. Thanks!

student1868
  • 197
  • 1
  • 3
  • 12

3 Answers3

1

I assume in the second example you want to only style the tag with the class "foo", in that case you can go like:

.foo:link, .foo:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.foo:hover, .foo:active {
  background-color: green;
  color: white;
}

no need to add an "a" selector to it as well, I hope this helps.

Tamas Nyari
  • 39
  • 5
1

In order to target only a elements that have the class "foo", use the selector as follows:

a.foo

So your example would look like this:

a.foo:link, a.foo:visited {
    /* ... */
}

a.foo:hover, a.foo:active {
    /* ... */
}

The reason your selectors don't affect the links is because that format targets a elements that are descendants of an element with class foo, such as this example:

<article class="foo">
    <a href="https://example.com">Example</a>
</article>
MichD
  • 1,140
  • 8
  • 16
0

If you follow this code, hopefully your problem will be solved. Your problem was in the css selector. If you study css selector next time there will be no problem.

https://www.w3schools.com/cssref/css_selectors.asp

https://www.smashingmagazine.com/2009/08/taming-advanced-css-selectors/

https://moderncss.dev/guide-to-advanced-css-selectors-part-one/

<!DOCTYPE html>
<html>
<head>
<style>
a.foo:link, a.foo:visited {
  background-color: red;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a.foo:hover, a.foo:active {
  background-color: green;
  color: white;
}

a:link, a:visited {
  background-color: burlywood;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: yellowgreen;
  color: white;
}
</style>
</head>
<body>

<h2>Link Button</h2>

<a class="foo" href="default.asp" target="_blank">This is a button link</a>
<a href="default.asp" target="_blank">This is another link</a>


</body>
theaminuldev
  • 109
  • 8