Why doesn't the adjacent sibling selector work? [closed]

Answer 1

Your HTML is invalid.

elements cannot contain other

elements, nor heading elements. If you inspect the code in the page, the browser corrects for it and generates it as:

This is the sibling of the selected para

this should not be colored

this should be colored

Which is why your CSS fails since #p2+h4 looks for an

as the immediate sibling of an element with the ID of p2. You can use either #p2~h4 or #p2+p+h4 to select the heading. Note however that #p2~h4 would also select the second heading.