What is the logic behind sibling selectors * + * and * ~ *?

Question

For this question I\'m using the following markup:

    
1
 
         


        

Answer 1

* + * Styles any element that is an immediate sibling of any element starting from the document root - Since the is actually an immediate preceding sibling of the body (despite not being visible in your code) this selector targets the body and the last two paragraphs, since the first paragraph isn't immediately following another sibling element. All three paragraphs happened to be underlined due to the nature of text-decoration on block-level descendants in the normal flow.

* ~ * This is basically the same thing as above, except using the general sibling combinator .. it styles downstream sibling element(s) that appear after the regardless of whether they're immediate siblings or not. Since the is the only sibling, this has the same effect as the above selector. The first paragraph is italicized due to inheritance.

p ~ * selects a sibling element that is following a

which in your example is the last two paragraphs. p + * styles any element that is immediate sibling of a paragraph, which would also be the last two

elements.