jQuery Selectors: Selects based on immediate child/parent relationship

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

$(‘parent > child’)

The > indicates immediate parent/child relationship.

So in the example below, the first <span> was selected but not the second <span>.

<!DOCTYPE html>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
        $(function () {
            $('div > span').css({'color': 'blue', 'font-size': '1.5em'});


    <span>Southernmost city in the world.</span>

    <p>The city centered around a prison built by the Argentine government.</p>

    <p>They also built a railway to the settlement, now a tourist attraction known as the
        <span>End of the World Train.</span></p>

    <a href='http://en.wikipedia.org/wiki/Ushuaia'>Visit us here.</a>

Series Navigation<< jQuery Selectors: Selecting an element with an ancestor
jQuery Selectors: Selects a child with a specific immediate parent with a class >>

Leave a comment

Leave a Reply