Friday, June 27th, 2008
CSS General Sibling Combinator in action
CSS:
-
-
#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:
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.
Related Content:
3.7 rating from 23 votes
Sometimes I wonder about the priorities in CSS implementation. These adjacent sibling combinators are a nice trick, but really, you simply don’t need them in real-world web development. Meanwhile the basics STILL aren’t covered in CSS, like custom constants (so I can define my colors once, instead of over and over) and tools for dealing with 100% / remaining height (even google’s web apps have 100% height bugs).
@Joeri:
“These adjacent sibling combinators are a nice trick, but really, you simply don’t need them in real-world web development.”
They can be very nice for typography and simplification of markup.
“Meanwhile the basics STILL aren’t covered in CSS, like custom constants”
How is that included in “the basics”?
“and tools for dealing with 100% / remaining height”
That’s definitely a glaring hole in the current/proposed spec.
@Joeri: What do you mean, “so I can define my colors once…”? You already can define colors once. It’s simple – define a color for the html node, for example – html {color:#333;}, and this color will be applied to all child nodes in the document.
@Will: I think Joeri is talking about CSS Variables there.
Last sentence should be:
“FF2+, Opera 9.5+, Safari 3+, Konqueror, and even IE7+”.. and if I remember it right this selector was already well supported years ago.. the only browser with lack of support which hold us from using it was IE.
@emwendelin: that’s right, though for me variables go one step further than constants (implying you can change them at run-time with a single call). For moderately complex web applications, it’s quite difficult to have CSS that’s clean, mentions each color once, works in all browsers, and doesn’t constrain the design at the same time. I’m not saying it can’t be done, just that it’s an incredible pain, and really, web development has too much pain already.