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

Jon Newby
Jon Newby
3,269 Points
Posted by Jon Newby
Jon Newby
3,269 Points

What's the difference between a 'general sibling selector' and a 'descendent selector'?

The two combinators seem to do the same thing. Forgive me if I've missed something obvious, but if someone could explain in a bit more detail that'd be great. Cheers

3 Answers

Milan Milosevic
Milan Milosevic
6,647 Points

Hi Jon.

General Sibiling Selector ~ picks all "BROTHER" elements coming after choosen element.

h2 ~ p targets all paragraphs that are sibilings to h2 and come after h2 in code.

Descendant selector pics CHILD elements to some specified element.

example:

   <div>
      <h2>I'm a child (descendant) of div</h2>
      <p> I'm also a child of div and sibiling of h2</p>
    </div>
    <h2>I'm not a child of div</h2>

So, when you go with: div h2 selector, only that h2 that is div's child will be selected. h2 ~ p will select paragraph because it is brother of h2 and comes after him in code

Jon Newby
Jon Newby
3,269 Points
Jon Newby
Jon Newby
3,269 Points

Great stuff, thank you for helping me out =]

Nathan Brazil
Nathan Brazil
Courses Plus Student 2,756 Points
Nathan Brazil
Nathan Brazil
Courses Plus Student 2,756 Points

I think you could clarify this by using indentation to show relationships.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

A great way to understand CSS selectors is to check out CSS Diner

Ginger Ranslam
Ginger Ranslam
8,156 Points

Thanks, this is an awesome game that makes things a little more clear and gives me some more practice!

johannbillar
johannbillar
9,028 Points
johannbillar
johannbillar
9,028 Points

Great game to quickly get practical knowledge! :) Thanks!

name564681351614
name564681351614
3,497 Points
name564681351614
name564681351614
3,497 Points

Hi Milan,

I'm still not following. The two selectors seem to do the same thing to me as well.

You stated:

 <h2>I'm a child (descendant) of div</h2>
     <p> I'm also a child of div and sibiling of h2</p>

I'm not a child of div

when you go with: div h2 selector, only that h2 that is div's child will be selected. h2 ~ p will select paragraph because it is brother of h2 and comes after him in code

What if you did div ~ h2? Wouldn't h2 be selected?

What if you did h2 p? Wouldn't the p still be selected?

I really want to grasp this before I move on. I appreciate the help! Eric

Milan Milosevic
Milan Milosevic
6,647 Points

div ~ h2 will not select h2 because it is a child element of div, not sibiling. ~ select only "brother" elements that come after their specified brother element in selector.

Also h2 p will select nothing, because p isnt a child of h2. Thats the way to target all paragraphs that are child of some h2 element!