jQuery Selectors: Content filter selector-contains

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

Another set of useful jQuery selectors are the content filter selectors.

These selectors allow you to select HTML elements based on the content inside the HTML element.

The syntax is $(“E:contains(value)”).

<!DOCTYPE html>
<head lang='en'>
    <meta charset='UTF-8'>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
        $(function () {
            $("h4:contains('Ushuaia')").css('color', 'blue');

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

    <img src='//codecrawl.com/code/images/ushuaia.jpg' height="200px">


If we make a slight change to the element by changing h4 to div, all content inside the div will be selected.

$("div:contains('Ushuaia')").css('color', 'blue');
Series Navigation<< jQuery Selectors: Matches the end of the attribute value E[attr$=value]
jQuery Selectors: Selects element that contains a specific child element $(‘has(E)’) >>

Leave a comment

Leave a Reply