Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) Basic Selectors Pseudo-Classes

Posted by Tiberiu Ivanoschi
Tiberiu Ivanoschi
1,484 Points

Visited state property does not apply

I followed the code instructions in my own workspaces and the visited color property of lightblue did not apply to my links. It remains purple. Also, after visiting the links and reloading the project in my browser, the links keep the visited state properties and not change to not visited properties. This happens in Chrome, Mozilla Firefox, Microsoft Edge and Internet Explorer browsers.

I have also tried real links instead of null ones and the visited state does not apply.

Also, I have used the workspaces code corresponding with the video.

a:visited {
  color: lightblue;
}
ken loney
ken loney
1,450 Points
ken loney
ken loney
1,450 Points

Can you post the rest of your CSS? Something is probably conflicting with what you're wanting it to do.

ken loney
ken loney
1,450 Points
ken loney
ken loney
1,450 Points

Also, if this is your code I'm looking at then your focus element needs a type selector. :focus { color: white; background-color: orange; } put an a in front of :focus

Tiberiu Ivanoschi
Tiberiu Ivanoschi
1,484 Points 
body {
  color: #878787;
  margin: 0;
}

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

h2 {
  font-size: 53px;
}

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

/*ID Selectors*/

#main-footer {
  padding-top: 60px;
  padding-bottom: 60px;
  border-bottom: solid 10px orange;
}

/*Class Selectors*/

.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: ligthblue;
}

a:hover {
    color: forestgreen;
}

a:active {
    color: lightcoral;
}

a:focus {
    color: white;
    background-color: orange;
}
Tiberiu Ivanoschi
Tiberiu Ivanoschi
1,484 Points

Also, that was the actual code, but I marked it as HTML so the highlighting didn't work. Apologies :)

2 Answers

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,664 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,664 Points

You misspelled lightblue in your CSS.

Tiberiu Ivanoschi
Tiberiu Ivanoschi
1,484 Points
Tiberiu Ivanoschi
Tiberiu Ivanoschi
1,484 Points

oops