CODEWITHSUNDEEP
htmlcss
user8359832
user8359832

Reputation:

Why am I getting all links displaying as visited when I only clicked on one link?

I built this html and css files in Repl that look like this:

index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Anchor pseudoclasses drill</title>
        <link href="index.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <main role="main">
        <p>Choose an animal below to search for it on Google. Remember: you can navigate through this list with <kbd>Tab</kbd> and <kbd>Shift</kbd> + <kbd>Tab</kbd>.</p>
        <ul>
          <li><a href="#">Cats</a></li>
          <li><a href="#">Dogs</a></li>
          <li><a href="#">Pigs</a></li>
        </ul>
      </main>
    </body>
</html>

index.css:

main {


padding: 30px;
}

a {
  text-decoration: none;
}

a:link {
  color: green;
}

a:visited {
  color: red;
}

a:focus, a:hover {
  font-size: 20px;
}

a:active {
  color:black;
}

/* key-like styles used by 
https://meta.stackexchange.com */
kbd {
  display: inline-block;
  margin: 0 .1em;
  padding: .1em .6em;
  font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
  font-size: 11px;
  line-height: 1.4;
  color: #242729;
  text-shadow: 0 1px 0 #FFF;
  background-color: #e1e3e5;
  border: 1px solid #adb3b9;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
  white-space: nowrap;
}

When I click on one of the links, instead of that one link turning red, all the links turn red and I am unclear as to visited is being applied to all the links when I only visited one.

Upvotes: 1

Views: 1738

Answers (1)

jak.b
jak.b

Reputation: 283

Because the href is the same.

main {
  padding: 30px;
}

a {
  text-decoration: none;
}

a:link {
  color: green;
}

a:focus, a:hover {
  font-size: 20px;
}

a:active {
  color: black;
}
a:visited {
  color: red;
}


/* key-like styles used by 
https://meta.stackexchange.com */
kbd {
  display: inline-block;
  margin: 0 .1em;
  padding: .1em .6em;
  font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
  font-size: 11px;
  line-height: 1.4;
  color: #242729;
  text-shadow: 0 1px 0 #FFF;
  background-color: #e1e3e5;
  border: 1px solid #adb3b9;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
  white-space: nowrap;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Anchor pseudoclasses drill</title>
        <link href="index.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <main role="main">
        <p>Choose an animal below to search for it on Google. Remember: you can navigate through this list with <kbd>Tab</kbd> and <kbd>Shift</kbd> + <kbd>Tab</kbd>.</p>
        <ul>
          <li><a href="#Cats">Cats</a></li>
          <li><a href="#Dogs">Dogs</a></li>
          <li><a href="#Pigs">Pigs</a></li>
        </ul>
      </main>
    </body>
</html>

Upvotes: 1

Related Questions