CSS3 Selectors: The ~ selector

This entry is part 10 of 40 in the series CSS3 Selectors

For this example, we use h2 ~ p.

This is a general sibling combinator.  Both h2 and p are siblings of each other.

It selects a <p> element preceded by an <h2> element.

<!DOCTYPE html>
<head lang='en'>
    <meta charset='UTF-8'>
        h2 ~ p {
            font-family: sans-serif;
            color: blue;
            font-size: 125%;
    <h1>American Music</h1>

    <p>The different types of music genre in America.</p><!-- Child combinator targets this paragraph -->

        <p>Taylor Swift</p><!-- Adjacent sibling combinator targets this paragraph -->
        <p>Carrie Underwood</p>
    <h1>Hard rock and metal</h1>

    <p> Nirvana has come to be regarded as one of the most influential and important rock bands of the modern era.</p>
    <!-- Child combinator targets this paragraph -->

Try running the CSS and you can see the 2 lines with the <p> tags that are selected.

Series Navigation<< CSS3 Selectors: The + selector
CSS3 Selectors: An element with an attribute E[attr] >>