The jQuery :first-of-type selector selects all the elements that are the first among the sibling of the same parent element. The examples are given here using the table and list items as these are the group elements.
Syntax of jQuery :first-of-type Selector
The syntax of the jQuery :first-of-type selector.
You have to use the elements name in the selector to select only the elements of matching type. If you specify as $("span:first-of-type"), it selects the first child of this element type.
jQuery :first-of-type Selector Select First Cell of Table
Let’s take the example of selecting the first table row. The below example contains a table with five rows. The example selects the tr element to select the first child of this type. After selecting the element, you can apply the CSS or other effects to highlight the element content.
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-of-type" ).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 Row</button></p> <table class="mytable"> <tr> <th>Sr No</th> <th>Name</th> </tr> <tr> <td>1</td> <td>Learn Python</td> </tr> <tr> <td>2</td> <td>See live output of the code.</td> </tr> <tr> <td>3</td> <td>Check PHP functions</td> </tr> <tr> <td>4</td> <td>use them on your project</td> </tr> <tr> <td>5</td> <td>jQuery scripting language</td> </tr> </table> |
Output
| Sr No | Name |
|---|---|
| 1 | Learn Python |
| 2 | See live output of the code. |
| 3 | Check PHP functions |
| 4 | use them on your project |
| 5 | jQuery scripting language |
You have to click the button given above to see the effect. The above example applies the background color to the first table row. If you use the td element to select with this selector, it selects all the td elements and applies the background color.
Select First Child of List Item Using the Selector
The below example contains the two unordered list items and the button. The first-of-type selector identifies the specified element type to select. the example applies the text color to the selected items.
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-of-type" ).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 Matching Type list</button></p> <div class="mydivli"> <ul class="list-one"> <li>Learn web development from Tutorialdeep!</li> <li><span>See live examples to understand the topic.</span></li> <li>Download codes to to your local system to quick-start.</li> <li>Find the resources I am using to create Tutorialdeep.</li> </ul> <ul class="list-two"> <li>Homepage</li> <li>About Us</li> <li><span>Contact</span></li> <li>Privacy</li> </ul> </div> |
Output
- Learn web development from Tutorialdeep!
- See live examples to understand the topic.
- Download codes to to your local system to quick-start.
- Find the resources I am using to create Tutorialdeep.
- Homepage
- About Us
- Contact
- Privacy
Click the button given in the example above to select and apply the CSS. It applies the ‘red’ color to the text of the first child of list items for both the unordered list element.