CSS General sibling combinator Selector

Description

The CSS general sibling combinator selector, denoted by a tilde character (~), selects all elements that are siblings of a specified element, regardless of their immediate order. This means that the selected elements can be anywhere after the specified element, as long as they share the same parent element.

The general sibling combinator is useful for styling multiple elements that follow a particular HTML element, without having to specify each element individually. For example, the following CSS selector will select all span elements that are siblings of a p element:

p ~ span {
  color: red;
}

This will result in all span elements that are siblings of a p element being displayed in red.

The general sibling combinator can also be used in conjunction with other selectors to create more complex selectors. For example, the following CSS selector will select all span elements that are siblings of a p element and have the class foo:

p ~ .foo span {
  background-color: blue;
}

This will result in all span elements that are siblings of a p element and have the class foo being displayed with a blue background color.

The general sibling combinator is a powerful tool for styling multiple elements in a single CSS rule. It can be used to simplify your CSS code and make it more maintainable.

Syntax

element1~element2 {
    css declarations;
}

Example

div~p {
   color: #3366ff;
   background: #ffff99;
}

Give it a Try

Click the button below to experiment with this selector.

Give it a Try!

Browser Support

The following table will show you the current browser support for the CSS general sibling combinator selector.

Desktop
Yes	Yes	Yes	Yes	Yes

Tablets / Mobile
Yes	Yes	Yes	Yes	Yes	Yes