jQuery :first-of-type Selector
Last Updated :
06 Jul, 2023
The jQuery :first-of-type Selector is used to select all elements that are the first child, of a particular type, of their parent.
Syntax:
$(":first-of-type")
The below examples illustrate the:first-of-type selector in jQuery:
Example 1: This example changes the background color to green and the 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 >
$(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 >
$(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
Share your thoughts in the comments
Please Login to comment...