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 Selectors Selectors - Beyond the Basics Child, Adjacent, and General Sibling Combinators

Posted by Dylan Carter
Dylan Carter
4,780 Points

I don't get what the difference is in using the > for children instead of just putting a space like we were doing?

Before when, say, i wanted to affect a p inside of the header i would use " header p { css:css; } "

what is the difference between that and doing..

" header > p { css:css; } "

3 Answers

Mohamed Nasser
Mohamed Nasser
5,316 Points

The difference is that when you use header > p { css:css; } you are targeting the p element who are direct children to header that means if you had a code like this

<header> <p>Paragraph 1</p> <p>Paragraph 2</p> <div> <p>Paragraph 3</p> <div> <p>Paragraph 4</p> </div> </div> </header>

The selector header > p { css:css; } will only target Paragraph 1 and Paragraph 2 .... the selector header p { css:css; } will target all the Paragraphs 1,2,3 and 4

Dylan Carter
Dylan Carter
4,780 Points

OHHH okay i get it the > is for direct children while just the space could be a child of it at any level if you will. thank you.

Dylan Carter
Dylan Carter
4,780 Points

OHHH okay i get it the > is for direct children while just the space could be a child of it at any level if you will. thank you.

Saqib Ali
Saqib Ali
3,686 Points
Saqib Ali
Saqib Ali
3,686 Points

Thought I'd just make the html clearer and practise some code markup.

header > p { css:css; }

<header> 
    <p>Paragraph 1</p> 
    <p>Paragraph 2</p> 
  <div> 
    <p>Paragraph 3</p> 
  <div> 
   <p>Paragraph 4</p> 
  </div> 
  </div> 
</header>
ywang04
ywang04
6,762 Points
ywang04
ywang04
6,762 Points

Hope this helps.

Difference between Descendant and Child selectors