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 Foundations Selectors Using Combinators in Selectors

Posted by Berk Eratay
Berk Eratay
1,574 Points

Child selector

What is the difference between

.main a { }

And

.main > a { }

Seems like both of them functioning pretty much the same way to me.

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Berk,

Depending on your html, they may or may not function the same.

.main a is a descendant selector. It will select all <a> elements that are descendants of .main

.main > a is a direct child selector. It will select only those <a> elements that are direct children of .main

If you have the following html:

<div class="main">
    <p>Some text</p>
    <a href="#">This is a direct child of .main</a>
</div>

the two selectors would appear to work the same because the only links are direct children of .main

If you have this html instead:

<div class="main">
    <p>Some text
        <a href="#">This link is not a direct child of .main</a>
    </p>
    <a href="#">This is a direct child of .main</a>
</div>

then .main a would select both links whereas .main > a would only match the link following the paragraph. It would not match the link inside the paragraph.

Berk Eratay
Berk Eratay
1,574 Points
Berk Eratay
Berk Eratay
1,574 Points

Hi Jason; Thanks for the quick answer very good explanation!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome!