jQuery Selectors: Selects a child with a specific immediate parent with a class

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

$(‘div.headline > span’)

Selects all <span> elements that have an immediate parent which is a <div> and with a class called .headline.

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


<div class='headline'>
    <span>Southernmost city in the world.</span>
    <p>The city centered around a prison built by the <span>Argentine government.</span></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: Selects based on immediate child/parent relationship
jQuery Selectors: Selects an element immediately preceded by a specific element >>

Leave a comment

Leave a Reply