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

How do I know what different anchor link elements there are, and which to use?

So when I was watching videos with Nick, I saw him use a lot of the following elements and such:

link a { /***insert CSS code here***/ }

However, in the video I'm watching with Guil, there was an import-styles.css file in the workspace. I was curious how they made the link underlined like they did in the import, so I clicked on it. I noticed that the element tag for the link was different than what I had seen with Nick. The one in the workspace with Guil looked like the following (there is spacing between the CSS attributes and such to keep it similar to what it showed in the workspace):

a:link {

text-decoration: none;

font-size: 20px;

color: #FFA949;

border-bottom: solid 3px;

padding: 0 9px 3px 9px;

display: inline-block;

}

Are these 2 a links (link a) the same thing, or are they different? If they're different, then how so? Can someone help explain these 2 very similar (if not the same) element tags?

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points

Hi there,

a:link is what is known as a pseudo selector so it targets a link that is in a certain state. So a:link would target a link that has not been clicked or visited. But a simple a {} selector would target any link on the document.

Hope this helps! :-)

Ok thank you!