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
Victoria Fuselier
Front End Web Development Techdegree Graduate 16,956 Pointsnav 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
Front End Web Development Techdegree Graduate 32,790 PointsHey 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!