CSS CSS Basics (2014) Basic Selectors Pseudo-Classes

all my links WERE orange then i clicked on ONE and they ALL turned light blue

all my links changed when one was clicked

Dane Parchment
Dane Parchment
Treehouse Moderator 10,307 Points

Can you please show us your code? It sounds to me like you have a style applying to all of your active or visited links. It would be easier to solve if you provide the code as well.

9 Answers

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 10,307 Points

Alright everyone, this answer is a long time coming, but someone finally provided all of their code, and I was able to isolate the issue.

Basically the :visited tag works by checking the actual link itself, you know, what is found within the href attribute's value. So if you have multiple links that all go to the same href link, then the a tags that include that href will be marked as visited.

<a href="#">1</a>
<a href="#">2</a>
<a href="nope.html">3</a>
<a href="#">4</a>

In the example provided above links: 1 2 and 4 all have the same hyperlink #. So if I was to click either 1 2 or 4 then any hyperlink that contains the href attribute value: # will be marked as visited. In the example above that would mean all of the links except 3 would be treated as visited.

Hopefully you now understand why that is happening.

Thanks!

I had the same issue. I was still working in the previous workspace. Relaunching it fixed that problem.

Ashraf Yacoub
Ashraf Yacoub
2,996 Points

Same happened to me, maybe it's in the workspaces

Christian Puga
Christian Puga
3,736 Points

Can u post your code so we can try and solve your problem?

lucky saito
lucky saito
4,257 Points

have you notice that when you go to a site and the link a dark blue color, and then when u clicked it and go back into same page of the link is located its another color like purple. Thats because now the link is a visited link, meaning that its showing the user that you have visited that link before. you can changed that with pseudo a:visited { color: purple or blue or lighter blue or whatever color u want}

it wasn't that. i hadn't cliked those links yet

Dane Parchment
Dane Parchment
Treehouse Moderator 10,307 Points

Again, can you actually post your code? How are you expecting anyone to properly debug your problem if you don't provide the code for us?

Dane parchment......it's because it wasn't my code i followed along with Gill in the course. i think it was the workspaces because it worked on sublime text

Dane Parchment
Dane Parchment
Treehouse Moderator 10,307 Points

I would still provide the code, especially since you could have accidentally typed in the wrong values while following along, or implemented an incomplete solutions. Regardless, you are asking for help to debug code without providing the code to debug.

It happened to me too and I'm happy to provide my code =)

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body> 
    <header id="top" class="main-header">
      <span class="title">Journey through the Sierra Nevada Mountains</span>
      <h1>Lake Tahoe, California</h1>
    </header>

        <div class="primary-content t-border">
            <p>
                Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
            </p>
            <a href="#">Find out more</a>
      <h2>Check out all the Wildlife</h2>
      <p>
        As spawning season approaches the fish acquire a humpback and protuberant jaw. After spawning they die and their carcasses provide a feast for gatherings of <a href="#">mink</a>, <a href="#">bears</a>, and <a href="#">Bald eagles</a>.
      </p>
            <a href="#">See the Wildlife</a>
        </div>

        <div class="secondary-content t-border">
      <h3>From Tents to Resorts</h3>
      <p>
        Lake Tahoe is full of wonderful places to stay. You have the ability to sleep in the outdoors in a tent, or relax like a king at a five star resort. Here are our top three resorts:
      </p>
      <ul>
        <li><a href="#">Lake Tahoe Resort Hotel</a></li>
        <li><a href="#">South Lake Tahoe Resorts</a></li>
        <li><a href="#">Tahoe Ski Resort Lodging</a></li>
      </ul>         
      <h3>Pack Accordingly</h3>
      <p>
        One of most important things when it comes to traveling through the great outdoors is packing accordingly. Here are a few tips:
      </p>
      <ol>
        <li>Bring layers of clothing</li>
        <li>Pack sunscreen</li>
        <li>Carry extra water just in case</li>
        <li>Pack light</li>
      </ol>
        </div>

        <footer id="main-footer" class="t-border">
            <p>All rights reserved to the state of <a href="#">California</a>.</p>
            <a href="#top">Back to top &raquo;</a>
        </footer>
  </body>
</html>

CSS:

body {
    color: #878787;
    margin: 0;
}

.main-header {
    background-color: orange; 
}

.title {
    color: white;
    font-size: 26px;
}

ol li {
    background-color: tomato;
    color: white;
    margin-bottom: 5px;
}

h1 {
    font-size: 90px;
    color: white;
}

h2 {
    font-size: 53px;
}

h3 {
    font-size: 20px;
    color: #48525c;
}

.primary-content {
    text-align: center;
}

.t-border {
    border-top: 2px solid lightgrey;
}

a:link {
    color: orange;
}

a:visited {
    color: lightblue;
}

I use Sublime Text on macOS when I code. Does anybody have any thoughts?

Dane Parchment
Dane Parchment
Treehouse Moderator 10,307 Points

Ok the reason this is happening is because in your html all of your links are pointing to the same hyperlink in this case "#" so when you click one, you have technically visited "#" before so all of those links show up as visited and the styles change accordingly

sasipim Suksareewattanakul
sasipim Suksareewattanakul
5,417 Points

Dane Parchment. Thanks for your answer and help. I got your point but look at the code, there is one href at the bottom that points to "#top" and not just "#". In that case shouldn't the link at the bottom "back to top" stay the same orange color instead of changing to lightblue?

unless it's due to the cache or cookie thing since we did click that link in the previous video? but that's before we set up the pseudo-class tho?