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 Julie Dellert
Julie Dellert
3,215 Points

a:visited is not working properly on my site.

I'm trying the CSS challenge and my main a:visited is not functioning correctly, can you tell me if I've done something wrong? The background color doesn't show and when I add a color property, it just adds it to the document even if I didn't click the link.

/* ====================================================== 
   Practice CSS Selectors 
========================================================= */

/* Change the color of all list items inside an unordered list */
ul {
  color: tomato;
}


/* Remove the text decoration from navigation links, and change their color when hovered */
a:link {
  text-decoration: none;
}
a:hover {
  color: #e93;
}

/* Create visited and hover styles for all links inside 'main' */
main a:hover {
  font-family:cursive;
}

main a:visited {
  background-color: yellow;
}

Here is the HTML for the site:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Practice CSS Selectors</title>
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif|Raleway" rel="stylesheet">
    <link href="http://treehouse-code-samples.s3.amazonaws.com/practice-css/styles-selectors.css" rel="stylesheet">
    <link href="selectors.css" rel="stylesheet">
  </head>
  <body>
    <div class="wrapper">   
      <!-- HEADER -->
      <header>
        <!-- LOGO -->
        <img src="logo.png" alt="Bookworm">
        <nav>
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Articles</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Get in Touch</a></li>  
          </ul>
        </nav>
      </header>

      <img class="main-img" src="main.jpg" alt="books">

      <!-- MAIN CONTENT -->
      <main>
        <h1>Latest Articles</h1>
        <article>
          <h3>Quisque Tortor Lacus</h3>
          <p>Morbi quis felis ex. Nulla lacus risus, laoreet tempus ipsum vitae, suscipit maximus est. Curabitur accumsan cursus ullamcorper. Proin tempus quam vel orci pulvinar, non finibus lectus rhoncus... <a href="#">read more &raquo;</a></p>
        </article>
         <article>
          <h3>Suspendisse et Eleifend Metus</h3>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tortor lacus, blandit vitae lacus ut dui rhoncus, laoreet diam vel, tincidunt... <a href="#">read more &raquo;</a></p>
        </article>       

        <div>
          <div class="list-primary">
            <h2>List of Important Stuff</h2>
            <ul>
              <li>Nulla lacus risus, laoreet tempus</li>
              <li>Praesent sit amet auctor sapien sit amet</li>
              <li>Aenean sit amet quam leo etiam</li>  
              <li>Duis eget nulla nec  lobortis habitant</li>          
            </ul>
           </div>
          <div class="subscribe">
            <h3>Stay updated on what I'm reading!</h3>
            <p>Vestibulum <a href="#">erat augue</a>, consequat non tellus ac, posuere scelerisque augue.</p>
            <input type="text" placeholder="Enter email...">
            <input type="submit" value="Signup">
          </div>
        </div>
      </main>

      <!-- FOOTER -->
      <footer>
        <span>&copy;2017 Bookworm Blog</span>
      </footer>
    </div>
  </body>
</html>

2 Answers

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

This property has some peculiar restrictions. In particular:

Properties that would otherwise have no color or be transparent cannot be modified with :visited.

But I was able to see the yellow color after adding "background-color: white;" to the "a:link" rule.

See the MDN page for more details, and also this special page on Privacy and the :visited selector.

Julie Dellert
Julie Dellert
3,215 Points
Julie Dellert
Julie Dellert
3,215 Points

Thank you! It's a bit weird that they would have it as part of the challenge if there are restrictions.