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 CSS Basics (2014) Basic Selectors Descendant Selectors

Stefan Durr
Stefan Durr
9,871 Points
Posted by Stefan Durr
Stefan Durr
9,871 Points

Declaring color: white on ul li Element

What is the point of selecting the Element ul li {color: white}??? This would bring no visible change to the list item in the unordered list since an anchor element would still need to be selected in order to change the color...

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

It sounds to me like just an example of specificity... what you can do to change the colour of an elements text on a specific instance, in this case a list item or an unordered list. But you can as you suggest override this further by making this a link which has it's own pseudo selectors for targeting links in certain states.

Keep in mind that by default links are unvisited and you can change the colour of an unvisited link with :unvisited pseudo selector. :-)

Gina Bégin
PLUS
Gina Bégin
Courses Plus Student 8,613 Points
Gina Bégin
Gina Bégin
Courses Plus Student 8,613 Points

Jonathan Grieve — can you share an example of how the psuedo class you mentioned would be written out in in a css declaration for changing those links to white? i.e., how/where in the declaration would :unvisited be placed?

Thanks in advance!

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Hi Gina.

Unvisited is a way of changing colour based on the "state" of a link. Unvisited would be the default state since when you visit a pafe for the first time you've yet to click on that link.

In practice it would look something like this

a:unvisited {
   color: white;
}

Which is a style that targets any unvisited link on a page.

You can be more specific by targeting links with a specific class or id

a.button-class:unvisited{
  color: white;
}

Anytime you use an element it goes directly at the end preceded by a colon : :visited

Hope this helps. :)

Gina Bégin
Gina Bégin
Courses Plus Student 8,613 Points
Gina Bégin
Gina Bégin
Courses Plus Student 8,613 Points

Jonathan Grieve Thanks! I understood the function, just didn't know how to place it in context to the rest of the declaration, so that helps a ton! Thank you. :)