jQuery Pseudo Class Selector Example

jQuery pseudo class selector is something like CSS class selector, it can help you to get the web element very easily and accurately. jQuery framework provides many pseudo class selectors, we will introduce them one by one by examples.

Table of Contents

1. Basic Pseudo Class Selector Overview.

All the pseudo class selector should be used follow a basic jQuery selector (id, tag or css class selector.). And use : to separate basic selector and pseudo class selector.

:first : Return the first matched web element. ($(“tr:first”) will return the first tr.)
:last : Return the last matched web element. ($(“p:last”) will return the last p. )
:not : Return all not matched web elements.($(“input:not(:disabled)”) return all not disabled html form input web element.)

:even : Return all even number index web elements, the index start from 0. ($(“tr:even”) return tr 1,3,5… the tr index is 0,2,4)
:odd : Return all odd number index web elements, the index start from 0. ($(“p:odd”) return p 2,4,6… the p index is 1,3,5)
:eq : Return matched index number web element, index number start from 0. ($(“tr:eq(1)”) return the second tr. )

:gt : Return web elements which index number greater than provided index number. Index number start from 0. ($(“tr:gt(5)”) return tr with index number 6,7,8… etc)
:lt : Return web elements which index number less than provided index number. Index number start from 0. ($(“tr:lt(5)”) return tr with index number 4,3,2,1,0)
:header : Return h1, h2, h3…etc. ($(“:header”) return all h1, h2, h3… etc.)

:animated : Return all web elements that just being animated now.

2. Pseudo Position Selector Example.

This example shows how to use :first, :last and :eq().

position-selector.html

jquery-special-postion-pseudo-selector-example

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

        $(function () {
            // Set first tr css style.
            $("tr:first").css({background:"blue", color:"yellow"});
            // Set last tr css style.
            $("tr:last").css({background:"yellow", color:"blue"});
            // Set tr with index number 2's css style.
            $("tr:eq(2)").css({background:"green", color:"red"});
        });

    </script>
</head>
<body>

<table border="1" width="50%">
    <tr>
        <th>User Name</th>
        <th>Email</th>
    </tr>

    <tr>

        <td>
            Jerry(:first)
        </td>

        <td>
            [email protected]
        </td>

    </tr>

    <tr>

        <td>
            Tom
        </td>

        <td>
            [email protected]
        </td>

    </tr>

    <tr>

        <td>
            Richard(:last)
        </td>

        <td>
            [email protected]
        </td>

    </tr>
</table>

</body>
</html>

3. Pseudo Range Selector Example.

Example about :even, :odd, :gt and :lt.

range-selector.html

jquery-specify-index-range-pseudo-selector-example

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

        $(function () {
            // Set even row tr style.
            $("tr:even").css({background:"blue", color:"yellow"});
            // Set odd row tr style.
            $("tr:odd").css({background:"white", color:"blue"});
            // Set row index number bigger than 5 tr css style.
            $("tr:gt(5)").css({background:"green", color:"red"});
            // Set row index number less than 1 tr css style.
            $("tr:lt(1)").css({background:"white", color:"black"});
        });

    </script>
</head>
<body>

<table border="1" width="50%">
    <tr>
        <th>User Name(:even)</th>
        <th>Email</th>
    </tr>

    <tr>

        <td>
            Jerry(:odd)
        </td>

        <td>
            [email protected]
        </td>

    </tr>

    <tr>

        <td>
            Tom(:even)
        </td>

        <td>
            [email protected]
        </td>

    </tr>

    <tr>

        <td>
            Richard(:odd)
        </td>

        <td>
            [email protected]
        </td>

    </tr>

    <tr>

        <td>
            Kevin(:even)
        </td>

        <td>
            [email protected]
        </td>

    </tr>

    <tr>

        <td>
            jackie(:odd)
        </td>

        <td>
            [email protected]
        </td>

    </tr>

    <tr>

        <td>
            john(:even)
        </td>

        <td>
            [email protected]
        </td>

    </tr>
</table>

</body>
</html>

4. Pseudo Not Selector Example.

Example about :not() selector.

not-selector.html

jquery-pseudo-class-not-selector-example

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

        $(function () {
            // Only set tr css style with index number not less than 2 (2,3,4,5,6...).
            $("tr:not(tr:lt(2))").css({background:"blue", color:"yellow"});
        });

    </script>
</head>
<body>

<table border="1" width="50%">
    <tr>
        <th>User Name</th>
        <th>Email</th>
    </tr>

    <tr>

        <td>
            Jerry(:first)
        </td>

        <td>
            [email protected]
        </td>

    </tr>

    <tr>

        <td>
            Tom
        </td>

        <td>
            [email protected]
        </td>

    </tr>

    <tr>

        <td>
            Richard(:last)
        </td>

        <td>
            [email protected]
        </td>

    </tr>
</table>

</body>
</html>

5. Pseudo Header Selector Example.

Example about :header selector.

header-selector.html

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

        $(function () {

            // Set all header tag (h1, h2, h3...) css style.
            $(":header").css({background:"yellow", color:"blue"});

            // Only set h3 tag css style.
            $("div > h3:header").css({background:"blue", color:"yellow"});
        });

    </script>
</head>
<body>

<h1>jQuery Header Selector Example</h1>
<div><h3>It is very easy to use.</h3></div>

</body>
</html>

1. Basic Pseudo Class Selector Overview.

2. Pseudo Position Selector Example.

3. Pseudo Range Selector Example.

4. Pseudo Not Selector Example.

5. Pseudo Header Selector Example.

Leave a Comment Cancel Reply