9/3/13

The Adjacent-Sibling Selector

meyerweb.com

The Adjacent-Sibling Selector

As previous articles in this series have shown, CSS has some interesting new selectors. Between the universal selector and the child selector, it's possible to construct selectors which would be next to impossible using traditional CSS1-style selectors. Web Review July 2000

Well, we're continuing the trend in this installment. This time, though, we'll be talking about something which is almost literally impossible to do with contextual selectors. With the adjacent-sibling selector, you can apply styles to elements based on the elements which immediately precede them in the document.

How It Works
The syntax is straightforward enough: just two or more selectors separated by a plus ( + ) symbol. The simplest construction is two elements with a plus between them. The selected element will be the one immediately following the plus symbol, but only when following the element listed before the plus. For example: H 1+P{ m a r g i n t o p :0 ; } The rule will apply to all paragraphs which immediately follow an H 1element, and which share the same parent. That's where the name comes from: The elements must have the same parent element, which makes them siblings, and they must be adjacent to each other in the document tree. Let's look at this in a little more detail. Examine the tree view in Figure 1 for a moment.

Figure 1: Finding adjace nt siblings with a docum e nt tre e .

One example of adjacent siblings is the E Mand S T R O N Gelements within the paragraph. In fact, the only place in Figure 1 where elements don't have adjacent siblings is where they don't have any siblings at all, such as the Aelement; and in the unordered list with three L Ichildren. There the first and third L Ielements are not adjacent. The first and second are adjacent, as are the second and third, but the first and third are separated by the second and thus not adjacent.
meyerweb.com/eric/articles/webrev/200007a.html 1/4

9/3/13

The Adjacent-Sibling Selector

So let's say that we want S T R O N Gtext to be green, but only when it follows E Mtext. The rule for this is: E M+S T R O N G{ c o l o r :g r e e n ; } Referring back to Figure 1, we can see that the S T R O N Gelement which is part of the paragraph will be green, but the S T R O N Gwhich is part of the L Iwill not. Note that this is true despite the fact that there may be text within the paragraph which is found between the E Mand S T R O N Gelements. For example: < p >T h i sp a r a g r a p hc o n t a i n ss o m e < e m > e m p h a s i z e dt e x t < / e m >a n d ,a f t e r t h a t ,w ef i n ds o m e< s t r o n g > s t r o n g l ye m p h a s i z e d t e x tw h i c hi sa l s og r e e n < / s t r o n g >d e s p i t et h e i n t e r v e n i n gt e x t . < / p > The text between the elements does not affect the operation of the selector. This is true even with block-level elements. Consider: < d i v > < h 3 > H e y ,a nH 3e l e m e n t < / h 3 > H e r e ' ss o m et e x tw h i c hi sp a r to ft h eD I V , a n dn o tc o n t a i n e di nac h i l do fi t . < p > H e r e ' sap a r a g r a p hw h i c hi ss h o r t < / p > < / d i v > We can make the paragraph gray with the following rule: H 3+P{ c o l o r :g r a y ; } Remember that the adjacent selector only cares about elements, and where they fit into the document structure. That's why the text is effectively ignored. (Technically, it's part of the D I Vand so lives "one level up" in the document tree, as part of the parent D I V .)

Combining With Other Selectors

Of course, the previous example will actually select any paragraph which follows an H 3 , no matter where in the document that happens. If we only want to pick those paragraphs that follow H3 level headers which are contained within a division ( D I V ), then we would write: D I VH 3+P{ c o l o r :g r a y ; } Suppose we want to narrow it down further: we only want this grayness to happen when the H 3and P elements are the children of a D I V(as opposed to descendants of any level). In this case, we write: D I V>H 3+P{ c o l o r :g r a y ; } Now, let's make things a little more general. Suppose we want any element which follows an H 3which is the child of a D I Vto be colored grayany element at all. You know where this is going, right? D I V>H 3+*{ c o l o r :g r a y ; } We can turn this around, too. We might want to apply styles to any element which is the descendant of a D I V with a class of a s i d ewhich immediately follows a table. In addition, any hyperlinks which are found within such a D I Vneed to be dark gray and underlined. Thus: T A B L E+D I V . a s i d e*{ c o l o r :g r a y ; }
meyerweb.com/eric/articles/webrev/200007a.html 2/4

9/3/13

The Adjacent-Sibling Selector

T A B L E+D I V . a s i d eA : l i n k{ c o l o r :# 4 4 4 ;t e x t d e c o r a t i o n :u n d e r l i n e ; } If you're still a little unsure of how these work, try taking a moderately complex document of your own and trying to construct selectors which will exactly address a given element using all the various CSS2 selectors we've used here. A little practice will go a long way toward getting comfortable with these selectors. (For a guide to which browsers will help you in this practice, see the "Browser Support" section near the end of the article.)

Interesting Uses
Okay, it's all well and good that we can do this sort of thing, but what's the big deal? There are hundreds of answers, but here are a few which occurred to me as I wrote the article. A common print effect is to have the first paragraph of an article be italicized, or boldfaced, or largerat any rate, different in some way from the rest of the article. Assuming that the article's title is an H 1element, then all we need is something like this: H 1+P{ f o n t s t y l e :i t a l i c ;f o n t s i z e :1 5 0 % ; } This further assumes that no other H 1elements will occur in the article, or if they do, that none will be followed by a paragraph. If you're already classing the H 1to mark it as the article's title, though, then you can turn that to your advantage: H 1 . t i t l e+P{ f o n t s t y l e :i t a l i c ;f o n t s i z e :1 5 0 % ; } Here's another possibility. You can change the style of every item in a list except the first one. For example, let's say you want the first item in a list to be normally styled, and the following ones to be gray and slightly smaller. Here's the rule: L I+L I{ c o l o r :g r a y ;f o n t s i z e :9 0 % ; } The first L Iin a list won't be selected because it doesn't immediately follow an LI element, but all the rest do. How about closing up the distance between headings and the following elements? Authors are always trying to do this with classes and other tricks, but with the adjacent-sibling selector it becomes very easy. Try this out in a CSS2-aware browser: H 1 ,H 2 ,H 3{ m a r g i n b o t t o m :0 . 1 2 5 e m ; } H 1+* ,H 2+* ,H 3+*{ m a r g i n t o p :0 . 1 2 5 e m ; } Ta-da! The usual amount of margin space between headings and whatever follows them is closed up to a mere eighth of an em. You can vary that amount as you like, of course. This can be adapted in any number of waysyou could pull lists up closer to paragraphs by using P + U L , increase the separation between tables which immediately follow one another, and any number of other things.

Browser Support
Adjacent-sibling selectors are supported in Internet Explorer 5.x Macintosh. They are also supported in the Netscape 6 preview release 1 for all the myriad platforms for which it's available, and in preview release 3 of Opera 4 for Windows. There are bugs in the handling of adjacent-sibling selectors in IE5 for Windows, and Opera 3 for Windows.
meyerweb.com/eric/articles/webrev/200007a.html 3/4

9/3/13

The Adjacent-Sibling Selector

Still More to Come

In many ways, the adjacent-sibling selector is the coolest of the new CSS2 selectors. Thanks to its addition to CSS, it's very easy to select for certain circumstances which many authors want to address, like closing up the space after headings, but until now have been forced to use classes or other tricks to handle. When combined with things like the universal selector, a vast array of possibilities open up. In the next article, we'll take a look at two new pseudo-classes. One of them can be useful in multiplelanguage documents, and the other can be very useful in any document at all.

All contents of this site, unless otherwise noted, are 1995-2012 Eric A. and Kathryn S. Me ye r. All Rights Reserved. "T houghts From Eric" is powered by the bercool WordPress.

meyerweb.com/eric/articles/webrev/200007a.html

4/4