jQuery :first-of-type Selector

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.

jQuery :first-of-type Selector

Syntax of jQuery :first-of-type Selector

The syntax of the jQuery :first-of-type selector.

Syntax
$(“:first-of-type”)

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

Test it Live

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

Test it Live

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.