Your html is invalid. p
element permitted content is phrasing content. Additional css adjacent sibling selector selects following the rule:
Adjacent sibling selectors have the following syntax: E1 + E2, where
E2 is the subject of the selector. The selector matches if E1 and E2
share the same parent in the document tree and E1 immediately precedes
E2, ignoring non-element nodes (such as text nodes and comments).
in your example element with id #p2
is not immediately precedes h4
. You can fix your html and use general sibling selector:
#p2 ~ h4 {
color: red;
}
This is the sibling of the selected para
this should not be colored
this should be colored
This will work because general sibling selector selects according to the following rule:
The following-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.
here element with id #p2
shares the same parent with second element h4
in html but not with the first.
Take a look also Difference between the selectors div + p (plus) and div ~ p (tilde)
References:
Adjacent sibling selectors
Following-sibling combinator