CSS selects the first child element
Selecting the First Child with CSS
In CSS, we often need to select the first child of an element for styling. This is very useful when designing web page layouts, giving us greater control over the page’s appearance and layout. This article will detail how to use CSS to select the first child element to achieve different effects.
1. Using the :first-child Selector
:first-child The selector is used to select the first child of an element. Here’s a simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Selector Example 1</title>
<style>
ul li:first-child {
color: red;
}
</style>
</head>
<body>
<ul>
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
</ul>
</body>
</html>
Output:
In this example, we use the :first-child selector to select the first li element under the ul element and set its text color to red. Run this code and you’ll see the text of the first element turn red.
2. Using the :first-of-type Selector
The :first-of-type selector is used to select the first child element of a given element type. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Selector Example 1</title>
<style>
ul li:first-of-type {
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
</ul>
</body>
</html>
Output:
In this example, we use the :first-of-type selector to select the first li element within the ul element and set its text to bold. Run this code and you’ll see the text of the first element become bold.
3. Using the :nth-child selector
:nth-child selector selects the nth child of an element, where n is an integer. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Select Child Element First Example</title>
<style>
ul li:nth-child(2) {
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
</ul>
</body>
</html>
Output:
In this example, we use the :nth-child(2) selector to select the second li element under the ul element and add an underline to it. Run this code and you will see an underline under the text of the second element.
4. Use the :nth-of-type selector
:nth-of-type selector selects the nth child element of a certain element type, where n is an integer. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Selector Element First Example</title>
<style>
ul li:nth-of-type(3) {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
</ul>
</body>
</html>
Output:
In this example, we use the :nth-of-type(3) selector to select the third li element under the ul element and set its text color to blue. Run this code and you will see that the text of the third element turns blue.
5. Combining :first-child and :nth-child
We can also combine the :first-child and :nth-child selectors to select the first and nth child elements of an element. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Select Child Element First Example</title>
<style>
ul li:first-child,
ul li:nth-child(3) {
font-style: italic;
}
</style>
</head>
<body>
<ul>
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
</ul>
</body>
</html>
Output:
In this example, we use :first-child to select the first li element under the ul element, and use :nth-child(3) to select the third li element, and then set their text to italic. Run this code and you will see that the text of the first and third elements are both italicized.
6. Use :first-of-type and :nth-of-type together
Similarly, we can also use the :first-of-type and :nth-of-type selectors together to select the first and nth child elements of an element type. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Selecting Sub-Elements First Example</title>
<style>
ul li:first-of-type,
ul li:nth-of-type(2) {
text-transform: uppercase;
}
</style>
</head>
<body>
<ul>
<li>First Element</li>
<li>Second Element</li>
<li>Third Element</li>
</ul>
</body>
</html>
Output:
In this example, we use :first-of-type to select the first li element under the ul element, and use :nth-of-type(2) to select the second li element, and then convert their text to uppercase. Run this code and you will see that the text of the first and second elements has become uppercase.
7. Using :nth-child(odd) and :nth-child(even)
In addition to selecting specific child elements, we can also use the :nth-child(odd) and :nth-child(even) selectors to select odd and even child elements. Here’s a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Selector Example 1</title>
<style>
ul li:nth-child(odd) {
background-color: lightgray;
}
ul li:nth-child(even) {
background-color: lightblue;
}
</style>
</head>
<body>
<ul>
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
<li>Fourth element</li>
<li>Fifth element</li>
</ul>
</body>
</html>
Output:
In this example, we use :nth-child(odd) to select odd-numbered children and set their background color to light gray; we use :nth-child(even) to select even-numbered children and set their background color to light blue. Running this code will see the background colors of the odd and even children alternate.
8. Use the :nth-child(n) selector
:nth-child(n) selector selects the nth child element among all child elements, where n is an integer. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Select Child Element First Example</title>
<style>
ul li:nth-child(2n) {
color: green;
}
</style>
</head>
<body>
<ul>
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
<li>Fourth element</li>
<li>Fifth element</li>
</ul>
</body>
</html>
Output:
In this example, we use :nth-child(2n) to select the 2nth child element (i.e., the even-numbered element) and set their text color to green. Run this code and you’ll see that the text of the even-numbered elements turns green.
9. Using the :nth-of-type(n) Selector
:nth-of-type(n) selector selects the nth child element of a specified type, where n is an integer. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Selecting Sub-Elements Example 1</title>
<style>
ul li:nth-of-type(3n) {
font-size: 20px;
}
</style>
</head>
<body>
<ul>
<li>First Element</li>
<li>Second Element</li>
<li>Third Element</li>
<li>Fourth Element</li>
<li>Fifth Element</li>
</ul>
</body>
</html>
Output:
In this example, we use :nth-of-type(3n) to select every 3nth li element (that is, every third element) and set their text size to 20 pixels. Run this code and you’ll see that every third element has its text size set to 20 pixels.
10. Using the :nth-child(An+B) Selector
The :nth-child(An+B) selector selects a specific element within a sequence of elements, where A and B are integers and n represents the element’s position in the sequence. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Select Child Element First Example</title>
<style>
ul li:nth-child(3n+1) {
background-color: lightyellow;
}
</style>
</head>
<body>
<ul>
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
<li>Fourth element</li>
<li>Fifth element</li>
</ul>
</body>
</html>
Output:
In this example, we use :nth-child(3n+1) to select every 3rd child element in a series (that is, every third element, starting from the first) and set their background color to light yellow. Running this code, you’ll see that every third child element has its background color changed to light yellow.
Through this article, you should have learned how to use CSS to select the first child element to achieve different effects.