CSS General Sibling Combinator in action
Date : 2008 06 27 Category : Tech & Development
Ajaxian
PLAIN TEXT
CSS:
#indirect-example1 h4 + p, #indirect-example2 h4 ~ p { background-color: #CCC; color: #F00; }
h4 ~ p {}
#indirect-example1 h4 + p, #indirect-example2 h4 ~ p { background-color: #CCC; color: #F00; }
Eric Wendelin has taken a look at the general sibling combinator shown above as:
PLAIN TEXT CSS:h4 ~ p {}
This would affect each <p> element that is a sibling of a preceding <h4> element. This is different from the Adjacent Sibling Combinator (+) in that it affects all following <p> siblings instead of just the immediate sibling. It is very well supported: IE7+, FF2+, Opera 9.5+, Safari 3+, and even Konqueror.