The CSS selector represents the first
CSS Selectors for Selecting the First
In CSS, we often need to select the first element within an element to apply a style. This is very useful when designing web page layout and styling. This article will detail the methods for selecting the first element in CSS selectors and provide sample code to demonstrate how to use these selectors.
1. :first-child Selector
:first-child selector is used to select the first child element within a parent element. For example, if we have a parent element that contains multiple <div> elements, we can use the :first-child selector to select the first <div> element.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
div:first-child {
color: red;
}
</style>
</head>
<body>
<div>First div element</div>
<div>Second div element</div>
<div>Third div element</div>
</body>
</html>
Output:
In the above example, the text color of the first <div> element will be set to red.
2. :first-of-type Selector
:first-of-type selector is used to select the first child element of a specific type within a parent element. For example, if we have a parent element that contains multiple <p> elements and <h1> elements, we can use the :first-of-type selector to select the first <p> element.
Sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type {
font-weight: bold;
}
</style>
</head>
<body>
<p>First p element</p>
<h1>First h1 element</h1>
<p>Second p element</p>
</body>
</html>
Output:
In the example above, the text of the first <p> element will be set to bold.
3. :first-letter Selector
:first-letter selector is used to select the first letter of an element. This is very useful when designing article titles or paragraphs.
Sample code below:
<!DOCTYPE html>
<html>
<head>
<style>
p:first-letter {
font-size: 24px;
color: blue;
}
</style>
</head>
<body>
<p>Geek-docs.com is an online technical documentation platform. </p>
</body>
</html>
Output:
In the example above, the first letter “G” will be set to 24 pixels in size and blue.
4. :first-line Selector
The :first-line selector selects the first line of text in an element. This is useful when designing paragraphs in an article.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
p:first-line {
font-size: 18px;
color: green;
}
</style>
</head>
<body>
<p>Geek-docs.com is an online technical documentation platform. We are committed to providing high-quality technical documentation and tutorials. </p>
</body>
</html>
Output:
In the above example, the first line of text will be set to 18 pixels and green.
5. :first-of-type combined with :nth-of-type(n)
:first-of-type selector combined with :nth-of-type(n) selector selects the first nth child of a specific type within a parent element. For example, if we have a parent element that contains multiple <p> elements and <h1> elements, we can use the :first-of-type and :nth-of-type(n) selectors to select the first <p> element and the third <h1> element.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type, h1:nth-of-type(3) {
color: purple;
}
</style>
</head>
<body>
<p>First p element</p>
<h1>First h1 element</h1>
<p>Second p element</p>
<h1>Second h1 element</h1>
<h1>Third h1 element</h1>
</body>
</html>
Output:
In the above example, the text color of the first <p> element and the third <h1> element will be set to purple.
Through the introduction and sample code in this article, I believe readers have understood how to use CSS selectors to represent the first element and apply these selectors to design web page layout and style in real projects.