The jQuery :first selector select only the first matching item of the group element. The group element can be a table, list, or any other element containing items in a group. You can apply the CSS after selecting the required element.
The below-given syntax showing the way of using the :first selector in jQuery.
You can use the tag name of the group element before the :first selector. For example: if you have to select the table, you have to use it as table:first in jQuery. Let’s make it more clear with the useful examples given below.
Examples of jQuery :first Selector
There are two examples I am using here to explain the selector. The first example contains the table and its elements while the second example contains list items.
Click the below example link to jump to the example with its explanation.
You can also start learning the examples by scrolling down with the content given below. Let’s check out the table elements which contain rows and cells.
Use jQuery :first Selector to Select First Row of a Table
If you have to apply the CSS or any other effect only to the first row of a table using jQuery. You have to use the selector as given in the example below.
The example adds a text color to the first row of a table.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<script> $(document).ready(function(){ $('.mybtn').click(function(){ $( "table.mytable tr:first" ).css( "color", "green" ); }); }); </script> <style> .mytable{ border-collapse:collapse; } .mytable tr th, .mytable tr td{ border: 1px solid #ccc; padding:10px; } </style> <p><button type="button" class="mybtn">Click Me to Color First Row Text</button></p> <table class="mytable"> <tr> <th>Sr. No.</th> <th>Cricketer Name</th> <th>Wicket</th> </tr> <tr> <td>1</td> <td>Mohd Sami</td> <td>3</td> </tr> <tr> <td>2</td> <td>Jasprit Bumrah</td> <td>6</td> </tr> <tr> <td>3</td> <td>Kagiso Rabada</td> <td>4</td> </tr> </table> |
Output
| Sr. No. | Cricketer Name | Wicket |
|---|---|---|
| 1 | Mohd Sami | 3 |
| 2 | Jasprit Bumrah | 6 |
| 3 | Kagiso Rabada | 4 |
The above example contains the button and the table. You have to just click the button to apply the CSS color to the first row of a table.
Select First List Element
If you want to apply the CSS or any other effect to the first list item in jQuery. You have to use the :first selector as the method given in the example below.
The example applies a CSS color to the first item of the list element.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> $(document).ready(function(){ $('.mylibtn').click(function(){ $( "ul.mylist li:first" ).css( "color", "green" ); }); }); </script> <p><button type="button" class="mylibtn">Click Me to Color First List Item</button></p> <ul class="mylist"> <li>Add color to first list item.</li> <li>You can apply sliding effect to first item using jQuery.</li> <li>Animate First list Element using jQuery.</li> <li>Create ading effect for first list item with jQuery </li> </ul> |
Output
- Add color to first list item.
- You can apply sliding effect to first item using jQuery.
- Animate First list Element using jQuery.
- Create ading effect for first list item with jQuery
The above example contains the button and the list items. You have to click the button to apply the green color to the first list item.