Beginning CSS: Cascading Style Sheets for Web Design, 2nd ...

Part I: The Basicsname of heading and the with an id name of body are siblings, and they appear in the source oneright after the other. In other documents these two elements may not be siblings. Naturally, if you havedifferent template requirements in these theoretical two different kinds of documents, you may like tohave a way to reference the ones where these elements are siblings explicitly, and that is one example ofa practical application of the next sibling selector. Also, as I mentioned in the previous section, “DirectChild Selectors,” sometimes you want to avoid creating new id and class names. In some situationswhen you use the next sibling selector, you can potentially avoid creating new class and id names.In the following proof-of-concept example, you try out the next sibling selector for yourself.Try It OutNext Sibling SelectorExample 3-5. To see how the next sibling selector works, follow these steps.1. Enter the following markup into your text editor:Next Sibling SelectorsNext Sibling SelectorsThe next sibling selector (or adjacent sibling combinator asit’s officially called) allows you to select an element based onits sibling. This paragraph has a lightyellow background anddarkkhaki text.This paragraph has a yellowgreen background and green text.This paragraph has no colored background, border, or text.2. Save the preceding markup as Example_3-5.html.3. Enter the following CSS into your text editor:body {font: 12px sans-serif;}p {padding: 5px;}h1 + p {background: lightyellow;color: darkkhaki;border: 1px solid darkkhaki;80