jQuery :first-of-type Selector
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
Please Login to comment...