Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Michael Culler
7,363 Pointsall my links WERE orange then i clicked on ONE and they ALL turned light blue
all my links changed when one was clicked
9 Answers
Dane Parchment
Treehouse Moderator 11,077 PointsAlright 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.
babasariffodeen
6,475 PointsThanks!
Devin Kelly
7,343 PointsI had the same issue. I was still working in the previous workspace. Relaunching it fixed that problem.
Ashraf Yacoub
2,996 PointsSame happened to me, maybe it's in the workspaces
Barry Cherry
Front End Web Development Techdegree Student 3,395 Pointsmines did the same thing. ''' a:link { color: orange; }'''
Christian Puga
3,736 PointsCan u post your code so we can try and solve your problem?
lucky saito
4,257 Pointshave 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}
Michael Culler
7,363 Pointsit wasn't that. i hadn't cliked those links yet
Dane Parchment
Treehouse Moderator 11,077 PointsAgain, 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?
Michael Culler
7,363 PointsDane 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
Treehouse Moderator 11,077 PointsI 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.
Barry Cherry
Front End Web Development Techdegree Student 3,395 Pointsa:link {
color: orange;
}
Linus Karlsson
7,402 PointsIt 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 »</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
Treehouse Moderator 11,077 PointsOk 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
5,417 PointsDane 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?
Dane Parchment
Treehouse Moderator 11,077 PointsDane Parchment
Treehouse Moderator 11,077 PointsCan 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.