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

CSS CSS Basics (2014) Basic Selectors Pseudo-Classes

Dimeji P.
Dimeji P.
2,441 Points
Posted by Dimeji P.
Dimeji P.
2,441 Points

ALL my orange links turn to the default browser color when JUST ONE is clicked.

I successfully changed the color of all links to orange. But when I click on one link, all the links return to the default color. Why is this is happening?

6 Answers

Sebastian Karg
Sebastian Karg
28,705 Points
Sebastian Karg
Sebastian Karg
28,705 Points

HI Dimeji,

thanks for sharing your issue and code.

I had the same problem and found a quite simple solution why all links turn into visited state after just clicking one.

I won't tell you here exactly what I found out, because it's more effective learning if you find out yourself, but I'm sure you'll find the same solution very quick.

Greetings, Basti

HINT: check your link attributes.

Dimeji P.
Dimeji P.
2,441 Points
Dimeji P.
Dimeji P.
2,441 Points

Thanks Basti,

Looking into it. Will let you know when I find out myself :)

Ming Jun Lim
Ming Jun Lim
10,060 Points
Ming Jun Lim
Ming Jun Lim
10,060 Points

Your <a> elements are all directed to a same address. 

<a href="#"> </a>
Dimeji P.
Dimeji P.
2,441 Points
Dimeji P.
Dimeji P.
2,441 Points

Thanks for responding Timo.

I REALLY DON'T KNOW HOW BUT IT HAS APPARENTLY FIXED ITSELF.

I fired up workspaces today, looked up my latest code and without making any changes, previewed it.

Currently in preview mode, ONLY the links I click change to the color of the visited style I selected.

But I find it very strange because after rebooting workspaces severally yesterday, ALL the links would return to the default browser visited style (not even the visisted style I selected) upon the click of just ONE link.

Been trying to figure out what might've been responsible but here's the code anyway. Still unaltered:

CSS:

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

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

h2 { font-size: 53px; }

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

main-footer {

padding-top: 60px; padding-bottom: 60px; border-bottom: solid 10px orange; }

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

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

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

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

a:link { color: orange; }

a:visited { color: lightblue; }

a:hover { color: forestgreen; }

a:active { color: lightcoral; }

a:focus { color: white; background-color: orange; }

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="#more">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">mink</a>, <a href="#bears">bears</a>, and <a href="#eagles">Bald eagles</a>.
  </p>
        <a href="#wildlife">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="#hotels">Lake Tahoe Resort Hotel</a></li>
    <li><a href="#resorts">South Lake Tahoe Resorts</a></li>
    <li><a href="#lodging">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>

Thanks again.

Timo J.
PLUS
Timo J.
Courses Plus Student 20,919 Points
Timo J.
Timo J.
Courses Plus Student 20,919 Points

Ok thanx for this informations Dimeji.

First, I want to notice you that nothing fixe itself in coding you should changed something and just forgot it but no worries it happen to everybody even to very experienced programmer. :)

Second, as I said it will happen very often with long code so my advice is always look for the why and the when on your code. I mean even if now it work you have to know why it didn't work before to not repeat the same mistake in the futur.

Finally my first suggestion is to make some research about the order of the hover, focus, visited and active style on your CSS because yes there is an order to respect to have a clean, understandable and with no bugs code.

Hope this help :)

Cheers

Dimeji P.
Dimeji P.
2,441 Points
Dimeji P.
Dimeji P.
2,441 Points

Yes. Thanks alot

Leo Sjöberg
Leo Sjöberg
6,526 Points
Leo Sjöberg
Leo Sjöberg
6,526 Points

I had the exact same issue and did just as you did, relaunched workspaces and it fixed itself. So apparently some things fix themselves, it was probably a bug.

Devin Kelly
Devin Kelly
7,343 Points
Devin Kelly
Devin Kelly
7,343 Points

I had the same exact issue. it wasn't that I had <a> elements directed to the same address and it didn't fix itself either. I figured out that I had been doing the work in the previous workspace. I tried clearing browser history and previewing index.html again but it did the same thing. I watched the video again and noticed that it said to relaunch the workspace (which I apparently didn't see due to coding in a different window). After I relaunched the correct workspace it worked normally. I would guess this is probably what happened to anyone that said "relaunching it fixed my problem".