The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. Sibling elements must have the same parent element, and "adjacent" means "immediately following". The following example selects all <p> elements that are placed immediately after <div> elements:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
div + p { background-color: lightgreen; } </style> <body> <div> <p>Paragraph 1 in the div.</p> <p>Paragraph 2 in the div.</p> <span><p>Paragraph 3 in the div.</p></span> </div> <p>Paragraph 4. Not in a div.</p> <p>Paragraph5. Not in a div.</p> </body> |
Paragraph 1 in the div. Paragraph 2 in the div. Paragraph 3 in the div. Paragraph 4. Not in a div. Paragraph5. Not in a div. |
