Assessment wanted for Selectors skill test 1-5!

MDN Learn
1

Codes:
Selector 1
Selector 2
Selector 3
Selector 4
Selector 5

2

Hi @Damaged_Coda

  • You could shorten the .alert selector in task 2 (same for task 4):
 .alert {
  border: 1px solid grey;
}
  • As it was specifically ask to style the link-state, it would be better to use the following selector in task 3 (The example looks the same, but in another case it could differ, for example if a:visited was not defined)
a:link {
  color: orange;
}
  • Task 4: list-style-type: none; should also be inside the longer selector
  • Task 4: [class="list"] is a rather unusual way of writing .list :slightly_smiling_face:

Happy Coding!
Michael

2 Likes
3

Hello Michael,

If I may, I have such a question -

a:link {
     color: orange;
}

-is not working for me. It only works if I combine in such a way:

a:link, 
a:visited {
     color: orange;
}

But as I understood, it does only because of a:visited part, however, I didn’t make any click on this link

ice_screenshot_20211001-104937
ice_screenshot_20211001-1049371269Ă—697 49.6 KB
ice_screenshot_20211001-105826
ice_screenshot_20211001-1058261528Ă—832 76.1 KB

4

Hi @DenisM

The link in the task points to “example.com” which is often used in examples. So you probably have clicked on it someday. The browser remembers visited links over different sessions and websites as long as the target is the same it still shows as visited.
Since a:link only styles not visited links (the opposite of a:visited) this is expected. Try changing the domain to “example.com.test” and it will automatically switch the link color.

Michael

1 Like
5

Wow! Thank you a lot for the explanation!

1 Like