The Ultimate CSS Reference

Prev | Current Page 122 | Next

Tommy Olsson and Paul O'Brien

"The Ultimate CSS Reference"

Sibling elements
must have the same parent element, and
???adjacent??? means ???immediately
following,??? so there can be no elements
between the sibling elements. The
combinator in an adjacent sibling
selector is a plus character (+), as shown in this example:
Example
This selector matches all p elements that
appear immediately after h2 elements:
h2+p {
?‹® declarations
}
h2+p {
?‹® declarations
}
Applying the above selector to this block of HTML may make things clearer:
SPEC
CSS2
BROWSER SUPPORT
Op9.2+ Saf1.3+ FF1+ IE7+
BUGGY FULL FULL BUGGY
The Ultimate CSS Reference 78

Heading

The selector above matches this paragraph.

The selector above does not match this paragraph.

The first paragraph matches the adjacent sibling selector h2+p, because the p element
is an adjacent sibling to the h2 element. The second paragraph doesn??™t match the
selector. Although it??™s a sibling of the h2 element, it??™s not adjacent to that element.
If we apply the above selector to the following HTML block, the paragraph isn??™t
matched??”it??™s not a sibling to the heading, since they don??™t have the same parent:

Heading

The selector above does not match this paragraph.

Pages:
110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134

Your Electronic Books

Tommy Olsson and Paul O'Brien

"The Ultimate CSS Reference"

Heading

Heading