Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Custom Selector</title> <style> /* Some custom style */ *{ padding: 5px; } </style> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function(){ // Highlight table rows appearing at odd places $("tr:odd").css("background", "yellow"); // Highlight table rows appearing at even places $("tr:even").css("background", "orange"); // Highlight first paragraph element $("p:first").css("background", "red"); // Highlight last paragraph element $("p:last").css("background", "green"); // Highlight all input elements with type text inside a form $("form :text").css("background", "purple"); // Highlight all input elements with type password inside a form $("form :password").css("background", "blue"); // Highlight all input elements with type submit inside a form $("form :submit").css("background", "violet"); }); </script> </head> <body> <table border="1"> <thead> <tr> <th>No.</th> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John Carter</td> <td>johncarter@mail.com</td> </tr> <tr> <td>2</td> <td>Peter Parker</td> <td>peterparker@mail.com</td> </tr> <tr> <td>3</td> <td>John Rambo</td> <td>johnrambo@mail.com</td> </tr> </tbody> </table> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <p>This is one more paragraph.</p> <form> <label>Name: <input type="text"></label> <label>Password: <input type="password"></label> <input type="submit" value="Sign In"> </form> </body> </html>
