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

Posted by Frank Cameron-Wilson
Frank Cameron-Wilson
8,814 Points

nav link styling

Hi there, I'm trying to style some navigation links before and after they've been visited. each link should, before being clicked on, have no decoration, after, it should have a line over the text, then when another link is clicked on, that link will have a line and ¡ the 1st link should revert back to no decoration. Here's my HTML and CSS.

<nav>
        <a href="#">home</a>
        <a href="#">who is it for</a>
        <a href="#">what happens</a>
        <a href="#">daily schedule</a>
        <a href="#">location</a>
    <a href="#">contact us</a>
</nav>

nav a:link {
    color: #fff;
    text-decoration: none;
    float: left;
    margin-right: 1em;
}
nav a:visited {
    text-decoration: overline;
}

For some reason the pseudo classes don't seem to work and if i add a different color to the :visited code it overrides the :link code, but the decoration isn't overridden. i'm viewing in chrome. Any help would be much appreciated, thank you.

2 Answers

James Eden
James Eden
1,539 Points
James Eden
James Eden
1,539 Points

Hi Frank.

I think the current/active link should be defined by "a:active"... Here's mine, which is inside a nav list... And apparently the link, visited, hover and active should be in this order.

ul.nav li a:link{
    text-decoration:none;
}
ul.nav li a:visited{
    text-decoration:none;
}
ul.nav li a:hover{
    text-decoration:none;
}
ul.nav li a:active{
    text-decoration:overline;
}
Frank Cameron-Wilson
Frank Cameron-Wilson
8,814 Points
Frank Cameron-Wilson
Frank Cameron-Wilson
8,814 Points

Thank you James, that has solved it. Nice one