CSS selects the first p in div
CSS Selects the First p in a div
In web development, we often need to style elements on a page. Sometimes we need to select specific child elements within an element for styling, such as selecting the first p
element within a div
. In this article, we’ll detail how to use CSS selectors to achieve this goal.
1. Use the :first-child pseudo-class to select the first p element
The :first-child pseudo-class selects the first child of an element. We can use this pseudo-class to select the first p element within a div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS selects the first p in a div</title>
<style>
div p:first-child {
color: red;
}
</style>
</head>
<body>
<div>
<p>First p element</p>
<p>Second p element</p>
</div>
</body>
</html>
Output:
In the example above, we use the div p:first-child
selector to select the first p
element in a div
and set its text color to red.
2. Use :nth-child to select the first p element
In addition to the :first-child
pseudo-class, we can also use the :nth-child
selector to select the first child element of an element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS selects the first p in div</title>
<style>
div p:nth-child(1) {
font-weight: bold;
}
</style>
</head>
<body>
<div>
<p>First p element</p>
<p>Second p element</p>
</div>
</body>
</html>
Output:
In the above example, we use the div p:nth-child(1)
selector to select the first p
element in a div
and set its text to bold.
3. Using :first-of-type to Select the First p Element
In addition to the :first-child
and :nth-child
pseudo-classes, we can also use the :first-of-type
selector to select the first child element of a specific type within an element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS selects the first p in a div</title>
<style>
div p:first-of-type {
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<p>First p element</p>
<p>Second p element</p>
</div>
</body>
</html>
Output:
In the example above, we used the div p:first-of-type
selector to select the first p
element within a div
and underline it.
4. Selecting the First p Element Using :nth-of-type
Similar to the :nth-child
selector, we can also use the :nth-of-type
selector to select the first child element of a specific type within an element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS selects the first p in div</title>
<style>
div p:nth-of-type(1) {
color: blue;
}
</style>
</head>
<body>
<div>
<p>First p element</p>
<p>Second p element</p>
</div>
</body>
</html>
Output:
In the above example, we used the div p:nth-of-type(1)
selector to select the first p
element in a div
and set its text color to blue.
5. The difference between using :first-child and :first-of-type
While both :first-child
and :first-of-type
can select the first child element of an element, there are some subtle differences between them. :first-child
selects the first child element of an element, while :first-of-type
selects the first child element of a specific type within an element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Select the First p in a div</title>
<style>
div p:first-child {
color: red;
}
div p:first-of-type {
font-weight: bold;
}
</style>
</head>
<body>
<div>
<p>First p element</p>
<span>First span element</span>
<p>Second p element</p>
</div>
</body>
</html>
Output:
In the example above, we used both the :first-child
and :first-of-type
selectors to select the first p
element and the first span
element within a div
, applying different styles to each.
6. The Difference Between Using :nth-child and :nth-of-type
Similar to the difference between :first-child
and :first-of-type
, :nth-child
and :nth-of-type
also have some subtle differences. :nth-child
selects the nth child element of an element, while :nth-of-type
selects the nth child element of a specific type within an element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS selects the first p in div</title>
<style>
div p:nth-child(2) {
color: green;
}
div p:nth-of-type(2) {
font-style: italic;
}
</style>
</head>
<body>
<div>
<p>First p element</p>
<p>Second p element</p>
<span>First span element</span>
</div>
</body>
</html>
Output:
In the example above, we use both the :nth-child
and :nth-of-type
selectors to select the second p
element and the second span
element within the div
, applying different styles to them.
7. Using :nth-child to Select Odd and Even Elements
In addition to selecting child elements at specific positions, we can also use the :nth-child
selector to select child elements at both odd and even positions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Selects the First p in a div</title>
<style>
div p:nth-child(odd) {
background-color: lightblue;
}
div p:nth-child(even) {
background-color: lightpink;
}
</style>
</head>
<body>
<div>
<p>First p element</p>
<p>Second p element</p>
<p>Third p element</p>
<p>The fourth p element</p>
</div>
</body>
</html>
Output:
In the example above, we use the :nth-child(odd)
selector to select the odd-numbered p
elements in the div
and set their background color to light blue; we use the :nth-child(even)
selector to select the even-numbered p
elements and set their background color to light pink.
8. Use :nth-of-type to select odd and even elements## 9. Use :nth-child to select a specific range of elements
In addition to selecting child elements in odd and even positions, we can also use the :nth-child
selector to select child elements within a specific range.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS selects the first p in a div</title>
<style>
div p:nth-child(n+2):nth-child(-n+4) {
color: purple;
}
</style>
</head>
<body>
<div>
<p>First p element</p>
<p>Second p element</p>
<p>Third p element</p>
<p>Fourth p element</p>
<p>Fifth p element</p>
</div>
</body>
</html>
Output:
In the example above, we use the :nth-child(n+2):nth-child(-n+4)
selector to select the second through fourth p
elements in a div
and set their text color to purple.
10. Use :nth-of-type to Select a Specific Range of Elements
Similar to the :nth-child
selector, we can also use the :nth-of-type
selector to select a specific range of child elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS selects the first p in div</title>
<style>
div p:nth-of-type(n+2):nth-of-type(-n+4) {
font-size: 20px;
}
</style>
</head>
<body>
<div>
<p>First p element</p>
<p>Second p element</p>
<p>Third p element</p>
<p>Fourth p element</p>
<p>Fifth p element</p>
</div>
</body>
</html>
Output:
In the example above, we use the :nth-of-type(n+2):nth-of-type(-n+4)
selector to select the second through fourth p
elements in a div
and set their text size to 20 pixels.
Conclusion
Through this article, we learned how to use CSS selectors to select the first p
element within a div
. We explored the usage of selectors such as :first-child
, :nth-child
, :first-of-type
, and :nth-of-type
, and provided detailed example code. We hope this article helps you better understand and apply CSS selectors to customize page styles.