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

<h4>Ushuaia</h4>

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

<div>
    <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>
</div>
</body>
</html>

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