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

Basic Selectors question

Do I understand this correctly?

p.key { color: green;}

Selects only < p > elements that belong to the key class.

.key p { color: green;}

Selects < p > elements that are descendants of the key class.

.key p,a { color: green;}

Selects < p > elements and < a > elements that are descendants of the key class.

.key p a { color: green;}

Selects < a > elements that are descendants of < p > elements that are descendants of the key class.

Particularly unsure if I have that last example correct.

2 Answers

<p class="key"> p.key selects p elements associated with the class key - Another way to word it. example </p>

<div class="key"><p>.key p Selects < p > elements that are descendants of the key class.</p></div>

<div class="key"> <p> <a href="#"> .key p,a Selects < p > elements and < a > elements that are descendants of the key class.</a> </p> <a href="#">This element will also be styles by .key p,a</a> </div>

<div class="key"><p>.key p a will style the < a > inside of every < p > <a href="#">This will be styled</a></p><a href="#"> This will not be styles</a></div>

You're spot on with your thinking, I wrote those examples to further demonstrate it visually.

Thanks!