CSS3 Subsequent Sibling Combinator (~)

Definition and Usage

CSS Subsequent Sibling Combinator (~) matching all elements after the first element (element1appearing 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.