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

Sean Fallon
Sean Fallon
8,516 Points
Posted by Sean Fallon
Sean Fallon
8,516 Points

Some elements don't work with child selectors. Example div ~ h1 p > h1 and so on.

The video explaining child selectors does not go into detail about why so many selectors don't work. I've ran into a handful of them and can't seem to find definitive answers why some don't work and others do.

4 Answers

Alan Brown
Alan Brown
20,524 Points

Best place to read this stuff Sean is the MDN website. Google ‘MDN p tag’ (changing the tag name to whatever you need info on) and the page should be pretty much top result. Go to the page and will see it starts with a description, then a demo, then a table. In that table look for ‘Permitted content’. For the p tag it states “Phrasing content” with a link to another page which lists all the tags.

You will also notice it links to the ‘Permitted parent’ which is “Flow content”.

Hope this helps on your learning adventure :-)

Alan Brown
Alan Brown
20,524 Points
Alan Brown
Alan Brown
20,524 Points

div ~ h1 works fine. p > h1 is invalid markup. You can't put a heading inside a paragraph. Only phrasing content is allowed.

Maybe share some your code. Here's my example to help you solve your problem. The h1 receives the yellow background.

<div>
  <div>div</div>
  <h1>h1</h1>
</div>

with

div ~ h1 {
  background: #ff0;
}
Sean Fallon
Sean Fallon
8,516 Points
Sean Fallon
Sean Fallon
8,516 Points

Thank you Alan Brown. So I did a bunch of research on this and there is a list of invalid markup but its hard to find a source that gives a good list. For example I didn't know you couldn't put a div inside a p tag. There are some hidden rules in CSS I wish were listed a little more obvious or the teachers of treehouse would mention.

Sean Fallon
Sean Fallon
8,516 Points
Sean Fallon
Sean Fallon
8,516 Points

Alan Brown Thank you so much for taking the time to help me. I've got a good grasp on this now.