Comments on: CSS Adjacent Sibling Selectors

By: Jake Shattles

Jake Shattles — Fri, 05 Mar 2010 01:40:19 +0000

Hello, I came across this article while searching for help with JavaScript. I’ve recently changed browsers from Safari to Microsoft IE 6. Just recently I seem to have a issue with loading JavaScript. Everytime I browse page that needs Javascript, my computer freezes and I get a “runtime error javascript.JSException: Unknown name”. I can’t seem to find out how to fix it. Any aid is greatly appreciated! Thanks

By: dug

dug — Thu, 11 Feb 2010 19:59:39 +0000

Hello,

How can I make the opposite thing?
I would change the style of an h4 element which is followed by a p element?

Bye

By: Richard

Richard — Wed, 19 Nov 2008 22:55:04 +0000

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)

By: About the indirect adjacent combinator (~) in CSS

About the indirect adjacent combinator (~) in CSS — Mon, 23 Jun 2008 23:28:54 +0000

[...] to the CSS Adjacent Sibling Combinator that I wrote about before, the indirect adjacent combinator is pretty nifty and supported by IE7+, [...]

By: Eric Wendelin

Eric Wendelin — Wed, 14 May 2008 23:14:20 +0000

@Vincent:
That is a brilliant idea! As you said though, not compatible with all major browsers … :(

By: Vincent

Vincent — Wed, 14 May 2008 22:57:34 +0000

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.

By: Eric

Eric — Sat, 23 Feb 2008 19:13:19 +0000

@Eli:
Interestingly, I am using exactly the technique you described for a horizontal CSS menu. Unfortunately, IE6 requires some hacks :(.

By: Eli Sand

Eli Sand — Sat, 23 Feb 2008 18:35:56 +0000

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.