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 trialKatsumi Suno
4,194 PointsDifference between "a" and "a:link"
What's the difference between a and a:link? Both seem to style unvisited links. Are there practical reasons to use one over the other?
1 Answer
Matthias Vanspringel
2,529 PointsIn fact a:link is used for unvisited links, a:visited for the visited links. a just covers both of them.
Katsumi Suno
4,194 PointsKatsumi Suno
4,194 PointsNot quite sure what you mean with "covers both of them"... Look at the following example
With this code everything works as intended. Unvisited links are orange, visited one light blue. It doesn't seem to make a difference if I add :link to the first rule or not.
Matthias Vanspringel
2,529 PointsMatthias Vanspringel
2,529 PointsWith
You say: Both visited and unvisited links should be colored orange. Since in CSS you can overwrite previous lines (the last written line of code for an element will be executed) you won't see the effect of this, because with
you say your visited links should be colored light blue.
If you use:
a : Both visited and visited are selected
a:link : Only unvisited links are selected
a:visited : Only visited links are selected
Katsumi Suno
4,194 PointsKatsumi Suno
4,194 PointsThis is strange...what you say makes perfectly sense, but to try it out I switched the above code sample and it still works. To be clear: now I have a:visited first (light blue) and a second (orange). Now the links should be orange, no matter what because a overwrites a:visited, right? But I still get the blue visited links.
Only if I add !important to the a-rule every link turns orange...
Is this maybe because a:visited is more specific?
Matthias Vanspringel
2,529 PointsMatthias Vanspringel
2,529 PointsCorrect, the most specific will be used:
To make an example
"*" (The selector which selects all elements) has a calculated specificity of 0,0,0,0
a has a calculated specificity of 0,0,0,1
a:link has a calculated specificity of 0,0,0,2
Higher number is higher specificity, higher specificity has higher priority.
If you want to learn more about specificity and importance: http://www.w3.org/TR/CSS2/cascade.html#specificity . It explains when something has priority over another.
Katsumi Suno
4,194 PointsKatsumi Suno
4,194 PointsThank you very much for your help! :)
Matthias Vanspringel
2,529 PointsMatthias Vanspringel
2,529 PointsNo problem, good luck with developping! :)