What does the tilde squiggle twiddle CSS selector mean

Question

Searching for the   character isn t easy  I was looking over some CSS and found this   check checked    content       What does it mean

User · Answer

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 selector
ul > 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 selector
ul + 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 Selector
ul ~ 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 Selector

The one we are looking at here is General Sibling Selector

User · Answer

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      lt ul gt     lt li class  a  gt 1st lt  li gt     lt li class  b  gt 2nd lt  li gt     lt li gt 3rd lt  li gt     lt li class  b  gt 4th lt  li gt     lt li class  a  gt 5th lt  li gt   lt  ul gt     Matches elements that are  b  Are adjacent to  a After  a in HTML   In example above it will mark 2nd li but not 4th    x000D   x000D      a    b   x000D       background-color   ff0000  x000D       x000D   lt ul gt  x000D     lt li class  a  gt 1st lt  li gt  x000D     lt li class  b  gt 2nd lt  li gt  x000D     lt li gt 3rd lt  li gt  x000D     lt li class  b  gt 4th lt  li gt  x000D     lt li class  a  gt 5th lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    JSFiddle

User · Answer

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     More info

User · Answer

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

User · Answer

The   selector is in fact the General sibling combinator  renamed to Subsequent-sibling combinator in selectors Level 4       The general sibling combinator is made of the  tilde   U 007E       character that separates two sequences of simple selectors  The   elements represented by the two sequences share the same parent in the   document tree and the element represented by the first sequence   precedes  not necessarily immediately  the element represented by the   second one    Consider the following example    x000D   x000D   a    b   x000D    background-color  powderblue  x000D    x000D   lt ul gt  x000D     lt li class  b  gt 1st lt  li gt  x000D     lt li class  a  gt 2nd lt  li gt  x000D     lt li gt 3rd lt  li gt  x000D     lt li class  b  gt 4th lt  li gt  x000D     lt li class  b  gt 5th lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D     a    b matches the 4th and 5th list item because they    Are  b elements   Are siblings of  a Appear after  a in HTML source order    Likewise   check checked    content matches all  content elements that are siblings of  check checked and appear after it

[css] What does the "~" (tilde/squiggle/twiddle) CSS selector mean?

Examples related to css

Examples related to css-selectors