CSS :first-of-type And :last-of-type Selectors
In this tutorial, we will understand :first-of-type and :last-of-type selectors in CSS with the help of some important examples. Let’s first understand :first-of-type selector.
In CSS, the :first-of-type selector is a pseudo-class that selects the first sibling of its type. In other words, this pseudo-class targets the first sibling of a specified element type within its parent. It applies CSS styles to the first occurrence of of its element type, regardless of the other types of elements present.
For example, the p:first-of-type selector will apply CSS styles to the first <p> element within its parent, not necessarily the first child of the parent.
If the first child of the parent is not a <p> element, p:first-of-type will still apply the styles to the first <p> that appears within its parent.
Syntax to Define CSS :first-of-type Pseudo-Class
The :first-of-type pseudo-class matches the first element of a specified type within its parent. The general syntax to declare the CSS
:first-of-type selector is as follows:
element:first-of-type {
/* CSS styles */
}In the above syntax, the element specifies the type of element you want to select (e.g., p, div, span). The pseudo-class :first-of-type targets the first occurrence of the specified element type within its parent.
Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<h2>Heading</h2>
<p>First paragraph.</p>
<p>Second paragraph.</p>
<span>Some text.</span>
</div>
</body>
</html>
Output:
In this example, the selector p:first-of-type will select the first <p> element within the parent <div> element and apply the styles to it, even though it is not the first child of the parent <div>. So, always remember that the :first-of-type selector in CSS selects the first occurrence of the specified element type within its parent.
CSS :last-of-type Selector
The :last-of-type selector in CSS is a pseudo-class that selects the last sibling of its type. In other words, this pseudo-class matches the last occurrence of a specified element type within its parent, regardless of its position among other elements within the parent.
The general syntax to define the :last-of-type selector is as follows:
element:last-of-type {
/* CSS styles */
}Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
p:last-of-type {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<span>This is a span element.</span>
<p>This is the third paragraph.</p>
</div>
</body>
</html>
In this example, the selector p:last-of-type selects the last <p> element within the parent <div> element and apply CSS style to it. While the other <p> elements remain unaffected.
Output:
Combining :first-of-type and :last-of-type Selectors
You can use both selectors to style the first and last elements of its parent type. Let’s take an example on it.
Example 3:
<!DOCTYPE html>
<html>
<head>
<style>
li:first-of-type {
background-color: yellow;
}
li:last-of-type {
background-color: lightgreen;
}
</style>
</head>
<body>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
<li>Dates</li>
</ul>
</body>
</html>
In this example, the selector li:first-of-type will select the first <li> element to apply the styles within the parent <ul> element. Similarly, the selector li:last-of-type will select the last <li> element to apply the CSS style within the parent <ul> element.
Example 4:
<!DOCTYPE html>
<html>
<head>
<style>
.container div:first-of-type {
background-color: lightblue;
padding: 10px;
margin-bottom: 5px;
}
.sub-container p:first-of-type {
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div>First div in the container</div>
<div>
<p>First paragraph inside the second div.</p>
<p>Second paragraph inside the second div.</p>
</div>
<div class="sub-container">
<p>First paragraph inside the sub-container.</p>
<p>Second paragraph inside the sub-container.</p>
</div>
</div>
</body>
</html>
In this example, the selector .container div:first-of-type will select the first <div> element inside the parent div element with the class attribute value “container”. The first <div> element in the .container gets a light blue background, padding, and margin.
Similarly, the selector .sub-container p:first-of-type will select the first <p> element within the parent <div> element with the class attribute value “sub-container”. The first <p> inside the .sub-container gets green text and bold font.
