The general sibling selector selects all elements that are siblings of a specified element. The following example selects all <p> elements that are siblings of <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. |