CSS pseudo-class selects the first element
CSS Pseudo-Class Selecting the First Element
In CSS, pseudo-classes are special selectors used to select elements, one of which is the first-selector pseudo-class. By using pseudo-classes, we can easily select the first element in a document and apply styles to it. In this article, we’ll detail how to use CSS pseudo-classes to select the first element and provide several code examples to demonstrate their usage.
1. Selecting the First Child
First, let’s look at how to use the :first-child pseudo-class to select the first child of a parent element. In the following example, we have a div> containing multiple p> elements. We’ll use the :first-child pseudo-class to select the first p> element and set its background color to gray.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Child Example</title>
<style>
div p:first-child {
background-color: lightgray;
}
</style>
</head>
<body>
<div>
<p>geek-docs.com - First paragraph</p>
<p>geek-docs.com - Second paragraph</p>
<p>geek-docs.com - Third paragraph</p>
</div>
</body>
</html>
Output:
In the example above, we use the :first-child pseudo-class to select the first <p> element within a <div> element and set its background color to gray. After running this example, the background color of the first <p> element will change to gray.
2. Selecting the First Element
In addition to selecting the first child element, we can also use the :first-of-type pseudo-class to select the first element of a specific type within a parent element. In the example below, we have a <div> containing multiple <p> and <span> elements. We’ll use the :first-of-type pseudo-class to select the first <p> element and set its text color to red.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First of Type Example</title>
<style>
div p:first-of-type {
color: red;
}
</style>
</head>
<body>
<div>
<p>geek-docs.com - First paragraph</p>
<span>geek-docs.com - First span</span>
<p>geek-docs.com - Second paragraph</p> </div>
</body>
</html>
Output:
In the example above, we use the :first-of-type pseudo-class to select the first <p> element within a <div> element and set its text color to red. After running this example, the text color of the first <p> element will change to red.
3. Select the First Link
In addition to selecting elements of a specific type, we can also use the :first-of-type pseudo-class to select the first link element in the parent element. In the example below, we have a <div> that contains multiple links. We will use the :first-of-type pseudo-class to select the first link element and set its background color to blue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Link Example</title>
<style>
div a:first-of-type {
background-color: lightblue;
}
</style>
</head>
<body>
<div>
geek-docs.com - First link
geek-docs.com - Second link
geek-docs.com - Third link </div>
</body>
</html>
Output:
In the example above, we use the :first-of-type pseudo-class to select the first link element within the <div> element and set its background color to blue. After running this example, the background color of the first link element will change to blue.
4. Selecting the First Paragraph
Next, let’s see how to use the :first-of-type pseudo-class to select the first paragraph element within the parent element. In the following example, we have a <div> that contains multiple paragraphs and headings. We will use the :first-of-type pseudo-class to select the first paragraph element and make its text bold.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Paragraph Example</title>
<style>
div p:first-of-type {
font-weight: bold;
}
</style>
</head>
<body>
<div>
<h2>geek-docs.com - First heading</h2>
<p>geek-docs.com - First paragraph</p>
<p>geek-docs.com - Second paragraph</p> </div>
</body>
</html>
Output:
In the example above, we use the :first-of-type pseudo-class to select the first paragraph element within the <div> element and make its text bold. After running this example code, the text of the first paragraph element will be bold.
5. Select the First Image
Finally, let’s look at how to use the :first-of-type pseudo-class to select the first image element within the parent element. In the example below, we have a <div> that contains multiple https://coder-cafe.com/wp-content/uploads/2025/09/images and paragraphs. We will use the :first-of-type pseudo-class to select the first image element and set its border to a 1px solid line.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Image Example</title>
<style>
div img:first-of-type {
border: 1px solid black;
}
</style>
</head>
<body>
<div>
<img src="https://coder-cafe.com/wp-content/uploads/2025/09/image1.jpg" alt="geek-docs.com - First image">
<p>geek-docs.com - First paragraph</p>
<img src="https://coder-cafe.com/wp-content/uploads/2025/09/image2.jpg" alt="geek-docs.com - Second image"> </div>
</body>
</html>
Output:
In the above example, we use the :first-of-type pseudo-class to select the first image element within the <div> element and set its border to a 1px solid line. After running this example, the border of the first image element will become a solid black line.
Through the above example code, we’ve detailed how to use CSS pseudo-classes to select the first element and provided several examples to demonstrate their use. We hope this article helps you better understand and apply the knowledge of selecting the first element using CSS pseudo-classes. In real-world development, understanding how to use pseudo-classes to select the first element can help us better control the style and layout of a page, improving user experience and page performance.
In addition to the :first-child and :first-of-type pseudo-classes introduced in the above examples, CSS also provides several other pseudo-classes for selecting the first element, such as :first-letter for selecting the first letter of an element and :first-line for selecting the first line of an element. Flexible use of these pseudo-classes allows for greater freedom and creativity in page design.
In real-world projects, we can flexibly utilize CSS pseudo-classes to select the first element based on specific needs and design requirements, achieving a variety of cool effects and layouts. Through continuous practice and experimentation, we can become more proficient in using CSS pseudo-classes and improve our front-end development skills.