CSS3 Subsequent Sibling Combinator (~)

Definition and Usage

CSS Subsequent Sibling Combinator (~) matches all elements after the first element (element1that appears after) element2.

element1 and element2 Must share the same parent element, but element2 Not necessarily immediately following element1 after.

Example

Select and set the style of all <ul> elements that follow the <p> element and share the same parent element:

p ~ ul {
  background-color: gold;
  border: 1px solid gray;
}

Try It Yourself

CSS Syntax

element1 ~ element2 {
  css declarations;
}

Technical Details

Browser Support

The numbers in the table indicate the first browser version that fully supports this compositor.