CSS Adjacent Sibling Selectors
Among the types of CSS selectors, one that is often overlooked is the CSS Adjacent Selector.
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.
The CSS code
h4 + p {
font-weight: bold;
color: #000;
}
The text below is a simple example of the above code:
This is normal heading 4 text
This is the <p> after the heading. It should be bold and black.
What’s even better is that this seems to work perfectly in IE 7 (UPDATE: it seems that this does not work in IE6, so it will be a bit before this is usable on any large scale. However, it is still good to understand these obscure CSS selectors because you may come across them as a professional, especially if IE8 successfully puts IE6 out of the top 5 browsers), Firefox, Opera, and Safari. Now I know what you’re thinking. Where in the world am I going to use this?
Perhaps we could use something like this to do something to all rows in a table except the first row? What if we knew the next element after an <img> tag was going to be a custom caption that we wanted to place properly underneath our image? The only problem I see is that this couples the HTML and CSS more than we might like sometimes. However, there are many places that probably would benefit from something this simple. Simplicity rules. Now that you know how to use it I have every confidence you can come up with a brilliant use for it.
What ideas do you have to use this CSS gem? What other selectors have you found useful but don’t often see?
Some text styles indent every paragraph in a section except for the first. To implement this, you would turn indent off for the ‘h4 + p’ selector, but on for the ‘p’ selector.
Thanks, Eric. I haven’t tried something like that, but that seems like a really good idea. I think that it would work quite nicely since the selector ‘h4 + p’ takes precedence because it is more specific than ‘p’. I may be wrong about that, though.
Usually in print that’s a style where there is extra leading between a heading and the following paragraph but no extra leading between two paragraphs. The reader needs the indentation to tell where one paragraph begins and another ends, but does not need indentation to tell where the first paragraph begins. It’s my old TeX experience, I guess.
That is a very good lesson in readability. Sites with a lot of text are hopefully taking this into account.
I don’t believe this has been “overlooked” as much as it has been that this definately NOT supported in IE6. I have a book on CSS referencing selectors published in 2006. I’m surprised you would have posted this without first testing it in IE6 (still an important (yet frustrating) market share of browsers). Follow this link to download a package which will allow you to have multiple IEs installed. http://tredosoft.com/Multiple_IE
Thank you for your insight, Christian.
Regardless of what’s tested I want to inform my readers of things that they could possibly see because it is still one of those things that a beginning designer or programmer may not have seen and hence they will be able to take something away from this article. I will update this post with this info.
I have not yet seen something that will allow me to have multiple instances of IE within one installation of Windows. This will be very helpful.
With any luck John Resig’s post will be correct and eventually there will be a push from other sides to drive down IE6’s market share.
“Forward-Enhancement” man. Who cares if it doesn’t work in IE6, it degrades into just normal text.
You got it, Chris. We just have to be careful where we use this. Don’t want to anger the CSS gods… ;)
I think this could be used in conjunction with pseudo-elements to great visual effect. For example, you could use h4 (plus) p:first-letter to create a drop-cap of the first letter of the first paragraph, and then style the rest of the first line with h4 (plus) p:first-line.
I fondly remember a lot of old books from when I was growing up starting each new chapter with a drop-cap and a stylized first line. :)
Actually, my earlier comment inspired me to write a post on the concept. You can see it here:
Book-Style Chapter Introductions Using Pure CSS
Thanks for the inspiration!
@CSSnewbie: Nice! I was really hoping to give someone some fuel for ideas for this kind of thing. Thanks for sharing it.
The selector is *very* useful in some cases. Take for example a very common layout of 3 columns with a space on either side of the middle one… normally you would have to either create a space via an HTML tag, or add a class/id to the middle one to give a space on either side.
However, if you use “div div {margin-left: 10px;}”, you add a space to the left of the 2nd and 3rd (works for as many columns as you want really - it skips the first one is all it does) columns, elimintating the need for any special markup to create a space around the middle column.
It’s too bad IE6 doesn’t support advanced CSS selectors - hopefully IE6 is kicked out of support very soon.
@Eli:
Interestingly, I am using exactly the technique you described for a horizontal CSS menu. Unfortunately, IE6 requires some hacks :(.
To chime in on what has already been said about the usefulness of siblings selectrs is the ability to create tooltips and other popups/rollover effects without the need for Javascript.
For example take the following rules:
.popup { position:relative; display: none; top:-12%; }
a:hover + .popup { display: block; }
This will display the popup container, which is great, seeing as how a block-level element can’t be contained in an inline element according to CSS specification and because no Javascript is involved, no degradation!! Alas, I wait for the day that it fully supported across all major browsers.
@Vincent:
That is a brilliant idea! As you said though, not compatible with all major browsers … :(
[...] to the CSS Adjacent Sibling Combinator that I wrote about before, the indirect adjacent combinator is pretty nifty and supported by IE7+, [...]
Unfortunately the selectors don’t work in IE7 if there are comments between siblings. I’m trying to work around the templates in CafePress, where the comments are hard-coded in. If you come up with any solutions I’d be very interested.
You can read about it here: http://reference.sitepoint.com/css/generalsiblingselector
The solutions mentioned below don’t work where there are comments. http://www.practicalecommerce.com/blogs/post/62-CSS-hacks-specific-to-Internet-Explorer-7 (not my blog)