Searching for the ~
character isn't easy. I was looking over some CSS and found this
.check:checked ~ .content {
}
What does it mean?
This question is related to
css
css-selectors
Note that in an attribute selector (e.g., [attr~=value]
), the tilde
Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
General sibling combinator
The general sibling combinator selector is very similar to the adjacent sibling combinator selector. The difference is that the element being selected doesn't need to immediately succeed the first element, but can appear anywhere after it.
It is General sibling combinator
and is explained in @Salaman's answer very well.
What I did miss is Adjacent sibling combinator
which is +
and is closely related to ~
.
example would be
.a + .b {
background-color: #ff0000;
}
<ul>
<li class="a">1st</li>
<li class="b">2nd</li>
<li>3rd</li>
<li class="b">4th</li>
<li class="a">5th</li>
</ul>
.b
.a
.a
in HTMLIn example above it will mark 2nd li
but not 4th.
.a + .b {_x000D_
background-color: #ff0000;_x000D_
}
_x000D_
<ul>_x000D_
<li class="a">1st</li>_x000D_
<li class="b">2nd</li>_x000D_
<li>3rd</li>_x000D_
<li class="b">4th</li>_x000D_
<li class="a">5th</li>_x000D_
</ul>
_x000D_
Good to also check the other combinators in the family and to get back to what is this specific one.
ul li
ul > li
ul + ul
ul ~ ul
Example checklist:
ul li
- Looking inside - Selects all the li
elements placed (anywhere) inside the ul
; Descendant selectorul > li
- Looking inside - Selects only the direct li
elements of ul
; i.e. it will only select direct children li
of ul
; Child Selector or Child combinator selectorul + ul
- Looking outside - Selects the ul
immediately following the ul
; It is not looking inside, but looking outside for the immediately following element; Adjacent Sibling Selectorul ~ ul
- Looking outside - Selects all the ul
which follows the ul
doesn't matter where it is, but both ul
should be having the same parent; General Sibling SelectorThe one we are looking at here is General Sibling Selector
Source: Stackoverflow.com