CSS3/Selectors/combinators/general
General sibling combinator A ~ B
The General sibling combinator represents a "B" element following a "A" element.
Syntax
A ~ B{ preperties }
Point, Note
- The general sibling combinator is made of the "tilde" (~) character that separates two sequences of simple selectors.
- The elements represented by the two sequences share the same parent in the document tree.
Example
[style.css]
h1 ~ p{ background-color: yellow; }
[index.html]
<body> <h1>Header 1</h1> <h2>Header 2</h2> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body>
The CSS Selectors Level 3 specification defines the General sibling combinator in 8.3.2. General sibling combinator.