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 The Selectors Solution

nav a versus nav a: link

I'm confused as to why Guil used nav a:link { text-decoration: none }

I simply used nav a and mine seemed to work just like his. Can someone explain to me why he used the link addition and when it'd be important to do it his way instead of mine?

1 Answer

Bella Bradbury
seal-mask
.a{fill-rule:evenodd;}techdegree
Bella Bradbury
Web Development Techdegree Student 12,709 Points

Hey Victoria!

The :link selector specifically targets unvisited links! Upon first viewing the page (before you've clicked on any links) the page would appear the same. However, using Guil's method the CSS of the link could be different after it was visited whereas your method would have the link display the same regardless of if a user has click on it or not.

To break this down further:

a {
  /*This style applies to all of the links at ALL TIMES, regardless of status*/
}

a:link {
  /*This style applies ONLY to UNVISITED links*/
}

a:visited {
 /*This style applies ONLY to VISITED links*/
}

It's also important to note that due to the cascade, any pseudo-classes (:link, :visited, etc.) will over-rule a non-pseudo-class defined style. Meaning, if we were to use both of the methods like below:

a {
  color: black;
}

a:link {
  color: white;
}

The page would display the links as white and not black, because the pseudo-class is more specific.

Hope this helps!