Editing the link states of a CSS class-CodePudding

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  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!

CodePudding user response：

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 >
    <a href="https://example.com">Example</a>
</article>

CodePudding user response：

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.

CodePudding user response：

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  href="default.asp" target="_blank">This is a button link</a>
<a href="default.asp" target="_blank">This is another link</a>


</body>