How to use CSS to handle the first style method
How to Use CSS to Style the First Element
In front-end development, you often encounter situations where you need to apply special styling to the first element. In this case, we can use CSS pseudo-class selectors to target the first element. This article will detail how to use CSS to style the first element and provide several sample code examples for your reference.
1. Using the :first-child pseudo-class selector
:first-child The pseudo-class selector selects the first child of a parent element and applies styles to it. Here is a simple sample code:
<!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>
p:first-child {
color: red;
}
</style>
</head>
<body>
<p>geek-docs.com - First Paragraph</p>
<p>geek-docs.com - Second Paragraph</p>
<p>geek-docs.com - Third Paragraph</p>
</body>
</html>
Result of running the code:
In the above example, we use The :first-child pseudo-class selector selects the first <p> element and sets its text color to red. Run this code and you’ll see the text color of the first paragraph change to red.
2. Using the :first-of-type pseudo-class selector
The
:first-of-type pseudo-class selector selects the first child element of a specified type under a parent element and applies styles to it. Here is an example code:
<!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>
p:first-of-type {
font-weight: bold;
}
</style>
</head>
<body>
<p>geek-docs.com - First paragraph</p>
<div>
<p>geek-docs.com - Paragraph within the first div</p>
<p>geek-docs.com - Paragraph within the second div</p>
</div>
<p>geek-docs.com - Second paragraph</p>
</body>
</html>
Code execution results:
In the example above, we use the :first-of-type pseudo-class selector to select the first <p> element and make it bold. Run this code and you’ll see the text in the first paragraph is bold.
3. Using the :first-letter pseudo-element selector
The
:first-letter pseudo-element selector selects the first letter of an element and applies styles to it. Here’s a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Letter Example</title>
<style>
p:first-letter {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<p>geek-docs.com - First Paragraph</p>
</body>
</html>
Result of running the code:
In the example above, we use the :first-letter pseudo-element selector to select the first letter of the first paragraph and set its color to blue and its font size to 24px. Running this code, you’ll see that the first letter of the first paragraph turns blue and its font size increases.
4. Using the :nth-of-type Pseudo-Class Selector
The :nth-of-type pseudo-class selector selects and applies styles to child elements of a specified type under a parent element. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nth of Type Example</title>
<style>
p:nth-of-type(2) {
background-color: lightgray;
}
</style>
</head>
<body>
<p>geek-docs.com - First Paragraph</p>
<p>geek-docs.com - Second Paragraph</p>
<p>geek-docs.com - Third Paragraph</p>
</body>
</html>
Result of running the code:
In the above example, we use the :nth-of-type(2) pseudo-class selector to select the second <p> element and set its background color to light gray. Run the code and you will see that the background color of the second paragraph becomes light gray.
5. Use the :first-line pseudo-element selector
:first-line pseudo-element selector can select the first line of an element and apply styles to it. Here’s an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Line Example</title>
<style>
p:first-line {
text-transform: uppercase;
}
</style>
</head>
<body>
<p>geek-docs.com - This is the first paragraph, this is the first paragraph, this is the first paragraph. </p>
</body>
</html>
Code Runtime Results:
In the example above, we use the :first-line pseudo-element selector to select the first line of the first paragraph and convert its text to uppercase. Running this code will show that the first line of the first paragraph is now uppercase.
6. Combining :first-of-type and :nth-of-type
We can also combine :first-of-type and :nth-of-type to select the nth child element of the first specified type. Here is an example code:
<!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 and Nth of Type Example</title>
<style>
p:first-of-type:nth-of-type(2) {
color: green;
}
</style>
</head>
<body>
<p>geek-docs.com - First Paragraph</p>
<p>geek-docs.com - Second Paragraph</p>
<p>geek-docs.com - The third paragraph</p>
</body>
</html>
Code running results:
In the above example, we use :first-of-type:nth-of-type(2) to select the second element in the first <p> element and set its text color to green. Run the code and you will see that the second paragraph text in the first paragraph turns green.
7. Combining :first-of-type and :not
We can also combine :first-of-type and :not to select all elements except certain elements that are the first child element of a specified type. Here is an example code:
<!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 and Not Example</title>
<style>
p:first-of-type:not(:last-of-type) {
font-style: italic;
}
</style>
</head>
<body>
<p>geek-docs.com - First Paragraph</p>
<p>geek-docs.com - Second Paragraph</p>
<p>geek-docs.com - Third paragraph</p>
</body>
</html>
Code Result:
In the above example, we use :first-of-type:not(:last-of-type) to select all elements except the last one in the first <p> element and set their font style to italic. Running this code will show that the text in the first and second paragraphs is italicized.
8. Combining :first-child and :nth-child
We can also combine :first-child and :nth-child to select both the first and nth child elements. Here is an example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Child and Nth Child Example</title>
<style>
p:first-child:nth-child(2) {
text-decoration: underline;
}
</style>
</head>
<body>
<p>geek-docs.com - First Paragraph</p>
<p>geek-docs.com - Second Paragraph</p>
<p>geek-docs.com - The third paragraph</p>
</body>
</html>
Code running results:
In the above example, we use :first-child:nth-child(2) to select the first and second child elements and add underline to their text. Run the code and you will see the text of the first and second paragraphs is underlined.
9. Combining :first-of-type and :last-of-type
We can also combine :first-of-type and :last-of-type to select the first and last child elements of a specified type. Here is an example code:
<!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 and Last of Type Example</title>
<style>
p:first-of-type:last-of-type {
background-color: lightblue;
}
</style>
</head>
<body>
<p>geek-docs.com - First Paragraph</p>
<p>geek-docs.com - Second Paragraph</p>
<p>geek-docs.com - Third paragraph</p>
</body>
</html>
Code execution results:
In the example above, we use the :first-of-type:last-of-type combination to select the first and last <p> elements and set their background colors to light blue. Running this code shows that the background colors of the first and last paragraphs change to light blue.
10. Combining :first-of-type and :nth-last-of-type
We can also combine :first-of-type and :nth-last-of-type to select both the first and nth-to-last child of a specified type. Here is an example code:
<!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 and Nth Last of Type Example</title>
<style>
p:first-of-type:nth-last-of-type(2) {
color: purple;
}
</style>
</head>
<body>
<p>geek-docs.com - First Paragraph</p>
<p>geek-docs.com - Second Paragraph</p>
<p>geek-docs.com - The third paragraph</p>
</body>
</html>
Code running results:
In the above example, we use :first-of-type:nth-last-of-type(2) to select the first <p> element and the second-to-last <p> element and set their text color to purple. Run the code and you will see that the text color of the first and second-to-last paragraphs changes to purple.