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

ian izaguirre
ian izaguirre
3,220 Points
Posted by ian izaguirre
ian izaguirre
3,220 Points

I do not understand the difference between a child and a sibling ?

The teachers notes states:

The > combinator targets a direct child of an element.

The ~ combinator targets all the specified siblings that follow an element.

My first question is: What is the difference between a Child and a Sibling ?

My second question is regarding one of the teachers examples. So this was the HTML we are playing with:

<body>
    <div id="container">
        <form class="form-contact br">
        <h1>Contact</h1>                               //  Heading

          <label for="name">Name:</label> 
          <input type="text" id="name">

        <label for="email">Email:</label>
        <input type="email" id="email" placeholder="email@website.com">

        <label for="msg">Message:</label>
        <textarea id="msg" rows="7"></textarea>

          <input class="btn inln default" type="submit" value="Submit">
          <input class="btn inln error" type="reset" value="Reset"> 
        </form>

        <hr>
        <img class="avatar rounded" src="img/avatar.png" alt="Mountains"> 

        <form class="form-login">
            <label for="username">Username:</label> 
            <input type="text" id="username">

            <label for="password">Password:</label>
            <input type="password" id="password">

            <input class="btn default" type="submit" value="Login">
      <a href="#" target="_blank">Forgot your password?</a>                         // Link 
        </form>
    </div>
</body>

One of his examples, shows something like this:

form > a {
  background-color: purple;
}

And another of his examples, shows something like this:

h1 ~ label {
  background-color: purple;
}

My second question is WHY would writing the CSS like this not work:

h1 > label {
  background-color: purple;
}

2 Answers

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

A child relationship is when one element (the child) is inside another element (the parent). A sibling relationship is between two elements that are both inside the same parent element.

And the reason that the selector "h1 > label" doesn't work is that selector targets label elements that are inside h1 elements. But judging from the selector that does work ("h1 ~ label") these elements are next to each other but one is not inside the other.

ian izaguirre
ian izaguirre
3,220 Points
ian izaguirre
ian izaguirre
3,220 Points

Amazing explanation, thank you.

Vassyl Machnev
Vassyl Machnev
4,298 Points

It's not really a question or something,i would just like to thank you for all your answer on this forum,you cleared up so much stuff for me,it's amazing. Thank's again!

Eugenia Lysenko
Eugenia Lysenko
1,910 Points
Eugenia Lysenko
Eugenia Lysenko
1,910 Points

I am totally confused thn... Why then I cannot just use ">" combinator? I would just write : form > label {...}

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

You certainly can use that selector. It would target all "label" elements that are directly inside a "form" element.

It was just not the correct choice for the original poster's second question.