Build a Stylized To-Do List - Build a Stylized To-Do list

HTML-CSS
1

Tell us what’s happening:

Build a Stylized To-Do list: Step 16 is not passing. The link should change color if visited. All the other styling for the links worked in css.

Your code so far

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Styled To-Do List</title>
    <link rel="stylesheet" href="styles.css"
</head>

<body>
 <ul class="todo-list">
  <li> 
   <input id="keyboards" type="checkbox">
   <label for="keyboards">Explore gaming keyboards</label>
   
   <ul class="sub-item">
    <li><a class="sub-item-link" href="https://forum.ionicframework.com/t/a-visited-not-working/75206/3" target="_blank">Store link</a></li>
   </ul>
   </li>
   <li> 
   <input id="report" type="checkbox">
   <label for="report">Finish the report</label>
   
   <ul class="sub-item">
    <li><a class="sub-item-link" href="https://facebook.com" target="_blank">Request Access</a></li>
    </ul> 
    </li>
    <li> 
   <input id="warranty" type="checkbox">
   <label for="warranty">View Phone's Warranty</label>
   <ul class="sub-item">
       <li><a class="sub-item-link" href="https://fb.com" target="_blank">View Receipts</a></li>
   </ul>
   </li>
   <li> 
   <input id="specs" type="checkbox">
   <label for="specs">Check Processor Specs</label>
   
   <ul class="sub-item">
    <li><a class="sub-item-link" href="https://fb.com" target="_blank">View Model Number</a></li>
   </ul> 
    </li> 
 </ul>
</body>

</html>

a:visited {
  color: yellow !important;
  background-color: blue;
}
a {
  text-decoration: none;
  color: red;
}

a:hover {
  color: blue;
}
a:focus {
  outline: green;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36

Challenge Information:

Build a Stylized To-Do List - Build a Stylized To-Do list

https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list

2

Hi @vgvgbjg788 and welcome to our community!

The failing test is:

  1. The links should change color when they are being clicked.

Which css rule applies to links which are being clicked?

3

Hey this css rule should change the link color when clicked

a:visited { color: yellow !important; background-color: blue; }

4

When a link is being clicked and when a link has been visited are two different things, and need different css rules.

5

Oh man thanks for your help. I thought the step failed because the color did not change when I “visited“ the link. But i suppose this is some browser issue. I forget to implement the css rule for the a:active.

1 Like