The jQuery :first-child selector select all the items that are the first child of its parent. If you use it in the group elements like table and list, it selects the first item of them.
However, this is not exactly the same as the jQuery :first selector in the selection of elements. The jQuery :first-child selector selects all the first child of its parent. You have to check the second example given on this page to find the difference.
Syntax of jQuery :first-child Selector
See the syntax of jQuery :first-child selector to select the elements.
It contains no additional parameter or arguments to pass and use it. However, you can select the specified element using its tag name, class name, and id. Find the examples below to make it more clear.
jQuery :first-child Selector Select First Row of Table
To select the first-row child of the table, you have to use the example given below. The example contains the table and the button to apply style on button click. You can also apply other CSS or effect after selecting the required row item 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 40 41 42 |
<script> $(document).ready(function(){ $('.mybtn').click(function(){ $( "table.mytable tr:first-child" ).css( "background", "yellow" ); }); }); </script> <style> .mytable{ border-collapse:collapse; } .mytable tr th, .mytable tr td{ border: 1px solid #ccc; } </style> <p><button type="button" class="mybtn">Click to Color First Child Row</button></p> <table class="mytable"> <tr> <th>Sr No</th> <th>Name</th> </tr> <tr> <td>1</td> <td>Guitar</td> </tr> <tr> <td>2</td> <td>Bongo Drum</td> </tr> <tr> <td>3</td> <td>Flute</td> </tr> <tr> <td>4</td> <td>Harmonium</td> </tr> <tr> <td>5</td> <td>Organ</td> </tr> </table> |
Output
| Sr No | Name |
|---|---|
| 1 | Guitar |
| 2 | Bongo Drum |
| 3 | Flute |
| 4 | Harmonium |
| 5 | Organ |
You have to click the button given above to apply the background color to the first row of the table. It applies the ‘yellow’ color to the table row which highlights the row as selected.
Select First List Element Using the Selector
There two unordered lists in the example given below. The :first selector selects only the first li of the first unordered list element. However, the :first-child selector select first li of both the unordered list element. See the example below check it by clicking on the button given.
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 |
<script> $(document).ready(function(){ $('.mybtnli').click(function(){ $( ".mydivli ul li:first-child" ).css("color", "red"); }); }); </script> <style> .list-one{ border:1px solid #ccc; } .list-two{ border:1px solid #ccc; margin-top:5px; } </style> <p><button type="button" class="mybtnli">Click to Color First List Item Text</button></p> <div class="mydivli"> <ul class="list-one"> <li>Hello and Welcome to Tutorialdeep!</li> <li>Learn jQuery How to with Examples.</li> <li>Download codes to quick-start learning.</li> <li>Check the resources I am using to create Tutorialdeep.</li> </ul> <ul class="list-two"> <li>jQuery</li> <li>PHP</li> <li>HTML</li> <li>CSS</li> </ul> </div> |
Output
- Hello and Welcome to Tutorialdeep!
- Learn jQuery How to with Examples.
- Download codes to quick-start learning.
- Check the resources I am using to create Tutorialdeep.
- jQuery
- PHP
- HTML
- CSS
When you click the button, it applies the CSS color to the first li item of both the unordered list element. This is the main difference between the :first selector and the :first-child selector of jQuery.