Appearance
How to Get a Specific Number of Child Elements With CSS
The :nth-child() pseudo-class selects only the elements that are nth child elements, regardless of type and parent.
You will need to follow this syntax:
How to Get a Specific Number of Child Elements in CSS
css
:nth-child(arg) {
// CSS Property;
}Here, "arg" is the argument representing the pattern for matching elements. It can be specified by a number, keyword, or formula.
Below, we’ll show examples with each of them. Let’s start!
Create HTML
How to Get a Specific Number of Child Elements in CSS
html
<body>
<p>Example</p>
<p>Example</p>
<p>Example</p>
<p>Example</p>
<p>Example</p>
</body>Add CSS
- Set the :nth-child selector and add the argument.
- Add style using the color, font-weight, and font-size properties.
How to Get a Specific Number of Child Elements in CSS
css
p:nth-child(3) {
color: #fc0303;
font-weight: bold;
font-size: 20px;
}Here is the full code.
Example of getting a specific number of child elements with a number:
Example of getting a specific number of child elements using a number:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-child(3) {
color: #fc0303;
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<p>Example</p>
<p>Example</p>
<p>Example</p>
<p>Example</p>
<p>Example</p>
</body>
</html>Result
Example Example Example Example Example
In this example, we applied the syntax mentioned above to the <p> element and specified the :nth-child selector by a number.
Next, you can see examples where the :nth-child selector is specified by keywords: "even" and "odd".
The "even" keyword specifies elements the numeric position of which is even (e.g., 2, 4, 6, 8, etc.), and "odd" determines that the numeric position is "odd" (e.g., 1, 3, 5, 7, etc.).
Example of getting a specific number of child elements using "even":
How to Get a Specific Number of Child Elements in CSS
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-child(even) {
color: #fc0303;
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<p>Example</p>
<p>Example</p>
<p>Example</p>
<p>Example</p>
<p>Example</p>
</body>
</html>Example of getting a specific number of child elements using "odd":
Example of getting a specific number of child elements using “odd”:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-child(odd) {
color: #fc0303;
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<p>Example</p>
<p>Example</p>
<p>Example</p>
<p>Example</p>
<p>Example</p>
</body>
</html>In our last example, the :nth-child selector is specified by a formula. It specifies the elements the position of which matches A*n + B, for every positive integer n. The value of n starts from 0.
Example of getting a specific number of child elements using a formula:
Example of getting a specific number of child elements using a formula:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-child(3n + 2) {
color: #fc0303;
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<p>Example</p>
<p>Example</p>
<p>Example</p>
<p>Example</p>
<p>Example</p>
</body>
</html>