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 provide many pseudo class selectors, we will introduce them one by one by examples.

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.

  1. :first : Return the first matched web element. ($(“tr:first”) will return the first tr.)
  2. :last : Return the last matched web element. ($(“p:last”) will return the last p. )
  3. :not : Return all not matched web elements.($(“input:not(:disabled)”) return all not disabled html form input web element.)
  4. :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)
  5. :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)
  6. :eq : Return matched index number web element, index number start from 0. ($(“tr:eq(1)”) return the second tr. )
  7. :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)
  8. :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)
  9. :header : Return h1, h2, h3…etc. ($(“:header”) return all h1, h2, h3… etc.)
  10. :animated : Return all web elements that just being animated now.

2. Pseudo Position Selector Example.

jquery special postion pseudo selector example

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

READ :   Difference Between JavaScript window.onload And jQuery document.ready

position-selector.html 

<!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.

jquery specify index range pseudo selector example

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

range-selector.html

<!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.

jquery pseudo class not selector example

Example about :not() selector.

not-selector.html

<!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.

jquery pseudo class header selector example

Example about :header selector.

READ :   jQuery EQ, HasClass, Has, If, Map, Not, Slice Filter Example

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>
(Visited 35 times, 2 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.