Css selectors unknown sign

Question

I have a problem in CSS selectors. ~ sign is unkown for me and i don't understand that's usage! Look at this:

nav[role="custom-dropdown"] input[type=checkbox]:checked ~ label:after {

What is ~ sign in this sample???

Answer 1

Its General sibling combinator

It is similar to the adjacent sibling combinator selector The difference is that the element being selected doesn't need immediately succeed the first element, but can appear anywhere after it.

<ul>
    <li class="type1"></li>
    <li></li>
    <li class="type2"></li>
    <li class="type2"></li>
</ul>

.type1 ~ .type2
{
}

The above selector will return both lis with .type2 although they are not direct adjacent to .type1