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
Alex Tasioulis
4,950 Pointscss selectors: ~ vs space
what's the difference between
h2 ~ p {}
and
h2 p {}
5 Answers
Dino Paškvan
Courses Plus Student 44,108 PointsThe first one is a general sibling combinator selector. It will select any p elements that are preceded (not necessarily directly) by an h2 element.
The second one is a descendant selector. It will select any p elements that are under the h2 element, no matter how far down the DOM tree they appear.
Let me illustrate:
<style>
h2 ~ div { }
</style>
<div> <!-- not selected -->
<div></div> <!-- not selected -->
<h2></h2>
<div></div> <!-- selected because there is an h2 before it -->
<div></div> <!-- selected because there is an h2 before it -->
</div>
<style>
div h2 { }
</style>
<h2></h2> <!-- not selected because it's not inside a div -->
<div>
<h2></h2> <!-- selected-->
<div>
<h2></h2> <!-- selected -->
</div>
<section>
<h2></h2> <!-- selected because it's inside a div, indirectly -->
</section>
</div>
<section>
<h2></h2> <!-- not selected because it's not inside a div -->
</section>
Dave McFarland
Treehouse TeacherAlso note that you'd never use h2 p as a selector, because it would only select <p> tags INSIDE of <h2> tags which is invalid HTML ;)
James Barnett
39,199 Points> In CSS it's important to understand differences between sibling, adjacent sibling, child and descendant.
Check out the selectutorial for that.
Alex Tasioulis
4,950 PointsThanks!
Alex Tasioulis
4,950 PointsThank you for the answers. Yes, bad example on my part. Dino, you confused me, there. You reversed their order (h2 ~ div vs div h2). Intentional?
div h2 selects all h2's that are inside a div, I get that.
I don't get div ~ h2. So, the W3C ref says: p~ul : Selects every <ul> element that are preceded by a <p> element. OK. Immediately preceded or in any way preceded? What if it's 50 lines under our first instance of a p?
OK so I did a test and I figured it out:
<style>
div ~ h2 { background: red }
</style>
<h2>not preceded so out</h2>
<div>div so out
<h2>
h2 NESTED in div (not preceded) so out
</h2>
</div>
<h2>h2 preceded by div so IN</h2>
<div> not an h2, not preceded by div, so out
</div>
<h2> IN </h2>
<h2> IN </h2>
<div></div><div></div><div><h2 id="LOL">NESTED so out</h2><h2> nested so out</h2> </div>
<h2>preceded and not nested so in</h2>
I think it would be much clearer if they specified that when they say preceded they imply preceded but NOT nested. my h2 with id LOL is preceded by 2 divs clearly, but still out because it's nested in a new div. They should specify that. Wow, I've been doing css for a while now and I'd never even seen a tilda there ever (actually I'd never seen + or > either... )
Dino Paškvan
Courses Plus Student 44,108 PointsI reversed their order because I figured such an example would be more likely in real life (blocks that appear under a certain title (heading)).
The ~ combinator is the general sibling combinator. It only selects siblings, not descendants.
In CSS it's important to understand differences between sibling, adjacent sibling, child and descendant.
A sibling is an element on the same level as some other element. An adjacent sibling is the same thing, but the two elements must be next to each other. A child is directly nested under an element, and a descendant is nested under an element, but it doesn't matter how far down it is.
Once you get the general terminology down, the names of selectors and combinators are fairly descriptive.
Alex Tasioulis
4,950 PointsThank you so much Dino. Great explanations as always (treehouse should hire you)
Dave McFarland
Treehouse TeacherYeah, I think Dino has more points than the whole staff of Treehouse combined :)
Dino Paškvan
Courses Plus Student 44,108 PointsOnly on paper :)