jQuery Selectors: Sibbling selector ~

This entry is part 22 of 33 in the series jQuery Selectors

$(‘prev ~ sibbling’)

It selects a sibbling element that is after the prev.

Both elements will have the same parent.

<!DOCTYPE html>
<head lang='en'>
    <meta charset='UTF-8'>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
        $(function () {
            $('h2 ~ p').css({'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 -->

Series Navigation<< jQuery Selectors: Selects an element immediately preceded by a specific element
jQuery Selectors: Select element with checked attribute >>

Leave a comment

Leave a Reply