[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

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

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+ ○

Supported in all versions

IE

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.

Home

Tweet

シェアする