adjacent selectors should allow for different elements

delayedinsanity · 07-11-2008, 10:54 PM

I just started implementing child selectors and adjacent siblings selectors into my CSS - previous to now I had used alternate classes or direct styles added to certain elements to get the effects I wanted, but I figured why not take advantage of what was available.

The problem I'm having is that it seems like adjacent sibling selectors (+) don't work with the body element. Anybody know why?

Code:

body + div {
/* css */
}

...should affect the first div element if it directly follows the body, but it doesn't. I tried to work around this by adding a span before the first div, and using the selector like so:

Code:

span + div {
/* css */

...almost worked, but it's affected all the divs, which it should only affect the first. I even tried some random elements like STRONG, just to mess around and see if it would work, but notta.

The adjacent selector is supposed to work on different elements but it seems so far that it only supports similar simple elements. p + p, h1 +h2, etc. No body + anything, or span + div...
-m

Jim · 07-11-2008, 10:55 PM

Shouldnt you use a comma?

delayedinsanity · 07-11-2008, 11:55 PM

Nope, that's if you want to style multiple elements.

Code:

/* style all the same */
h1, h2, h3 {
font-weight:700;
color:#222;
}

/* style first adjacent element, so the first p following a p, but not the third, fourth, fifth, etc or first */
p + p {
font-size:2em;
}

maZtah · 07-13-2008, 04:56 PM

An adjacent sibling is an element that follows right after another, as long as they both have the same parent.

Your problem is that the <div> is in the body, so they don't have the same parents. What you're looking for is the first-child pseudo-class.

body > div:first-child { } will select only the first <div> (in the body).

delayedinsanity · 07-13-2008, 08:14 PM

Yeah I just hardwired the fix into the stylesheet, since :first-child isn't trustworthy. Thank you though.
-m

maZtah · 07-13-2008, 09:21 PM

True that current browsers (IE) don't support it.

Though, you could use jquery for it to work cross browser.

You should check out Selectors/firstChild - jQuery JavaScript Library for it.