I don't understand usage for ~

Thanks for clarify. But does it have to be inside of any tag? I still don't get it what's the relation between H1 and label?

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

For that code snippet, if you did h1 ~ label it would select any labels that are Siblings of the h1.

If you had more code and put a label inside of an h2 tag, that label would not be affect by the CSS styling. So there really is only a relationship between the h1 and the label because you want there to be, and no relation between an h2 tag and a label tag.

You could just do label {color: blue} but then every label on your page would be blue. With h1 ~ label {color: blue} only the one you have in the code will be blue and the one in an h2 tag will not.

Just another tool for specificity.

I hope that makes sense.

So you say, anything above the child with this css selector, I can create a connection between parent and child. Right? Like:

< h2>Title< h2>

< ul>
    < li >...</ li>
< /ul>

h2 ~ ul{...}

Sorry for messy code. That markdown sheet doesn't work :(

That's correct. Except they are siblings not Parent/Child (I added the mark down to your code for you. If you click edit comment for your comment it should show how the proper formatting is done :).

So the ul element that is the sibling of the h2 element will be the only element affected by the CSS style.

If you had another ul somewhere else on the page, (as long as it was not also a sibling of an h2) ... for example a list in an h4 element

<h4>Another list</h4> 
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

None of these would be changed/styled because they are part of an h4 and NOT an h2.

Interesting. I need to understand more about parenting. I though the children have to be wrapped with some tag (div, p...) Thanks Jason.

I apologize, you are right about the children. I was using children and siblings interchangeably, and that is incorrect.

The ul is a sibling of the h2 and that is why you select those with the ~ (General Sibling Selector)

I edited my answers to use "Sibling" instead of "Children" (The reasons are the same, I just used the wrong terms).

I'm really sorry for the confusion on my part. And any further confusion I caused you.

So Petr,

Please read through the comments again with my correction. I was thinking of children as a group (i.e. brothers and sisters) and therefore confused the term children and sibling in my answers.

Let me know if this still makes sense! And again, I apologize.

Cool Jason! Thanks. I do the CSS Selector course in this moment, so I will see how to understand that deeply. Thanks a lot.