jQuery Contains, Has, Hidden, Visible, Child Selector Example

This example will show you how to use :contains and :has jQuery pseudo-class selector to get web elements by web element content. And how to use :hidden and :visible selector to get web elements that are hidden or visible. It also tells you how to use child selector ( for example :first-child, :last-child, etc) to get child web elements.

1. jQuery :contains() Selector Example.

:contains() selector return web elements which element text contains specified string.

contains-text-selector.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Contains Text Selector</title>
    <script src="../../lib/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        $(function () {
            // Get all li that content contains 'Java'.
            $("li:contains('Java')").css({background:"blue", color:"red"});
        });

    </script>
</head>
<body>

<ul>
    <li>Java</li>

    <li>C++</li>

    <li>Java Script</li>

</ul>


</body>
</html>

2. jQuery :has() Selector Example.

:has() selector return web elements which has specified child web element.

has-web-element-selector.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Has Web Element Selector</title>
    <script src="../../lib/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        $(function () {

            // Set image web element border style which contained by html a tag.
            $("a:has('img') > img").css({border:"solid 2px red"});

        });

    </script>
</head>
<body>

<a href="#">Image One<br/><img src="../../images/ic_launcher.png"/></a>
<img src="../../images/ic_launcher_round.png" />

</body>
</html>

3. jQuery :hidden, :visible Selector Example.

:hidden selector return web elements that have hidden property enabled.
:visible selector return web elements that are visible.

hidden-visible-selector.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hidden Visible Selector</title>
    <script src="../../lib/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        $(function () {
            // Hide odd number p.
            $("p:odd").hide();

            // Set odd number p ( hidden p ) text color to red.
            $("p:odd").css({color:'red'});

            // Set visible p ( even number p ) text color to blue.
            $("p:visible").css({color:'blue'});

            // Show hidden odd p which text color is red again.
            $("p:hidden").show();
        });

    </script>
</head>
<body>

<p>Java Script</p>

<p>Node JS</p>

<p>Html</p>

<p>Java</p>

<p>Python</p>

<p>C++</p>

</body>
</html>

4. jQuery :first-child, :last-child and :nth-child(step+start_idx) Selector Example.

:first-child return the first child web element of parent selector while :last-child returns the last child element.
:nth-child(step+start_idx) return child web elements start from start_idx with step intervals.

child-web-element-selector.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child Web Element Selector</title>
    <script src="../../lib/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        $(function () {
            // Set first li style.
            $("li:first-child").css({background:"blue", color:"yellow"});

            // Set last li style.
            $("li:last-child").css({background:"yellow", color:"blue"});

            // Set css style for every 3 li begin from second li.
            $("li:nth-child(3n+2)").css({background:"green", color:"red"});
        });

    </script>
</head>
<body>

<ul>
    <li>Java</li>

    <li>C++</li>

    <li>Java Script</li>

    <li>Node JS</li>

    <li>C++</li>

    <li>Dot Net</li>

    <li>Python</li>

    <li>jQuery</li>

    <li>Angular JS</li>

    <li>Java EE</li>

</ul>


</body>
</html>