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

Jiho Song
Jiho Song
16,469 Points
Posted by Jiho Song
Jiho Song
16,469 Points

What is the difference between using ~ and just writing down the specific type name? <CSS>

As I learned sibling combinator,

I came to doubt why we should denote ~ sign after headline.

I mean why we dont use just h1 label { color:white; }

instead of h1 ~label { color:white; }

Is there going to be any significant change if i use like the former one?

2 Answers

Steven Parker
Steven Parker
231,268 Points
Steven Parker
Steven Parker
231,268 Points

:point_right: These select different things.

Your first example is a descendant selector. If you write "h1 label" you are targeting only LABEL elements that are contained inside an H1 element (which would be rather unusual).

But your second example is a general sibling selector. If you write "h1 ~ label" you are targeting LABEL elements that come after an H1 element, and share the same parent with it.

This HTML sample shows the difference in the elements that would be targeted:

<h1>
    <label>Your descendant selector would target this label.</label>
</h1>
<label>Your general sibling selector would target this label.</label>
Jiho Song
Jiho Song
16,469 Points
Jiho Song
Jiho Song
16,469 Points

Thanks, it helped

but want just one more clarification.

does that mean

as long as i'm using ~ selectors after h1 no matter where it is placed, will it consider as a sibling selector?

like

<h1> </h1> <p></p> <ul></ul> <ol> </ol>

then, all those <p>, <ul>, <ol> can be regared as a sibling when i call those with ~?

h1~p h1~ul h1~ol

if it is, i feel like the literal meaning of "siblings" is bit deteriorated since sibling should be placed to right after one another.