Friday, June 27th, 2008

CSS General Sibling Combinator in action

Category: CSS, Tip

>pre>

Eric Wendelin has taken a look at the general sibling combinator shown above as:

  1. 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:

Posted by Dion Almaer at 8:20 am
6 Comments

+++--
3.7 rating from 25 votes

6 Comments »

Comments feed TrackBack URI

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).

Comment by Joeri — June 27, 2008

@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.

Comment by eyelidlessness — June 27, 2008

@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.

Comment by WillPeavy — June 27, 2008

@Will: I think Joeri is talking about CSS Variables there.

Comment by emwendelin — June 27, 2008

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.

Comment by medikoo — June 28, 2008

@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.

Comment by Joeri — June 28, 2008

Leave a comment

You must be logged in to post a comment.