Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
[CSS Selector] E ~ F

[CSS Selector] E ~ F

Using '~' (tilde) applies styles to all subsequent sibling elements. This is generally called the 'general sibling combinator'. The condition is that the elements share the same parent element and appear after the specified element. Note that it does not work in IE6 and below.

Sample Code

style.css

/* Apply to all p elements that follow an h2 as siblings */
h2 ~ p { color: red;}

/* Gray out a label when its input is disabled */
input:disabled ~ label { color: #999;}

/* Show related content when a checkbox is checked */
input[type="checkbox"]:checked ~ .menu { display: block;}

/* Add margin-top to all siblings after a divider */
.divider ~ * { margin-top: 24px;}

Browser Display Result

h2 ~ p { color: red;} /* Applies to all p elements that are subsequent siblings of an h2 element. */

<p>This is a p element.</p>
<h2>This is an h2 element.</h2>
<p>This is a p element.</p>
<p>This is a p element.</p>

Browser Compatibility

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

3+ ○

2 and earlier ×

Edge

12+ ○

11 ○

10 ○

9 ○

8 ○

7 ○

6 ×

Opera

9+ ○

8 and earlier ×

Mobile

iOS Safari

1+ ○

Android Browser

4.4+ ○

3 and earlier ×

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data is based on MDN.

If you find any errors or copyright issues, please contact us.

Home