Skip to content
Related Articles

Related Articles

jQuery :first-of-type Selector

Improve Article
Save Article
  • Last Updated : 14 Nov, 2022
Improve Article
Save Article

The jQuery :first-of-type Selector is used to select all elements those are the first child, of a particular type, of their parent. 

Syntax:

$(":first-of-type")

Below examples illustrate the :first-of-type selector in jQuery: 

Example 1: This example changes the background-color to green and text-color to white, of the first heading of their parents (div tags). 

HTML




<!DOCTYPE html>
<html>
<head>
  <title>
    jQuery | :first-of-type Selector
  </title>
  <script src=
  </script>
  <!-- Script to use first-of-child selector -->
  <script>
    $(document).ready(function () {
      $("h4:first-of-type").css({
        "background-color": "green",
        "color": "white"
      });
    });
  </script>
  <style>
    option {
      font-weight: bold;
      font-size: 25px;
      color: green;
    }
    select {
      font-weight: bold;
      font-size: 25px;
      color: green;
    }
  </style>
</head>
<body style="text-align:center; width: 500px; margin: auto">
  <h1>
    jQuery | :first-of-type Selector
  </h1>
  <div style="border:1px solid blue;">
    <h4>The first heading in first div.</h4>
    <h4>The last heading in first div.</h4>
  </div><br>
  <div style="border:1px solid blue;">
    <h4>The first heading in second div.</h4>
    <h4>The last heading in second div.</h4>
  </div>
</body>
</html>


Output: 

 

Example 2: This example changes the background-color to green and text-color to white, of the first heading of <body> tag. 

HTML




<!DOCTYPE html>
<html>
<head>
  <title>
    jQuery | :first-of-type Selector
  </title>
  <script src=
  </script>
  <!-- Script to use first-of-child selector -->
  <script>
    $(document).ready(function () {
      $("h4:first-of-type").css({
        "background-color": "green",
        "color": "white"
      });
    });
  </script>
  <style>
    option {
      font-weight: bold;
      font-size: 25px;
      color: green;
    }
    select {
      font-weight: bold;
      font-size: 25px;
      color: green;
    }
  </style>
</head>
<body style="text-align:center; width: 500px; margin: auto">
  <h1>
    jQuery | :first-of-type Selector
  </h1>
  <h4>The first heading in body.</h4>
  <h4>The last heading in body.</h4>
</body>
</html>


Output: 

 

Supported Browsers:

  • Google Chrome 90.0+
  • Internet Explorer 9.0
  • Firefox 3.6
  • Safari 4.0
  • Opera 10.5

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!