A special group of pseudo-classes is formed by pseudo-classes that allow you to select certain child elements:
- :first-child : represents the element that is the first child
- :last-child : represents the element that is the last child
- :only-child : represents an element that is the only child in some container
- :only-of-type : selects an element that is the only element of a certain type (tag) in some container
- :nth-child(n) : Represents a child that has a specific number n, such as the second child
- :nth-last-child(n) : represents the child element that has a specific number n, starting from the end
- :nth-of-type(n) : selects a child of a specific type that has a specific number
- :nth-last-of-type(n) : selects a child element of a specific type that has a specific number, starting from the end
Pseudo-class first-child
We use the first-child pseudo-class to select the first links in blocks:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectors in CSS3</title>
<style>
a:first-child {
color: red;
}
</style>
</head>
<body>
<h3>Tablets</h3>
<div>
<a href="#" title="">Microsoft Surface Pro 4</a><br />
<a href="#" title="">Apple iPad Pro</a><br />
<a href="#" title="">ASUS ZenPad Z380KL</a>
</div>
<h3>Smartphones</h3>
<div>
<p>Top Smartphones 2016</p>
<a href="#" title="">Samsung Galaxy S7</a><br />
<a href="#" title="">Apple iPhone SE</a><br />
<a href="#" title="">Huawei P9</a>
</div>
</body>
</html>
A selector style is a:first-childapplied to a link if it is the first child of any element.
In the first block, the link element is the first child element, so the specific style is applied to it.
And in the second block, the first element is a paragraph, so none of the links are styled.
Pseudo-class last-child
We use a pseudo class last-child:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectors in CSS3</title>
<style>
a {
color: rgb(14, 14, 16);
text-decoration: none;
}
a:last-child {
color: blue;
text-decoration: none;
}
</style>
</head>
<body>
<h3>Tablets</h3>
<div>
<a href="#" title="">Microsoft Surface Pro 4</a><br />
<a href="#" title="">Apple iPad Pro</a><br />
<a href="#" title="">ASUS ZenPad Z380KL</a>
</div>
<h3>Smartphones</h3>
<div>
<p>Top Smartphones 2016</p>
<a href="#" title="">Samsung Galaxy S7</a><br />
<a href="#" title="">Apple iPhone SE</a><br />
<a href="#" title="">Huawei P9</a>
</div>
</body>
</html>
The selector a:last-childdefines the style for links that are the last child elements.
In the first block, just the last child element is a link. But in the second block, the last child element is a paragraph, so in the second block, the style is not applied to any of the links.
selector only-child
The :only-child selector selects elements that are the only children in containers:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectors in CSS3</title>
<style>
div p:only-child {
color: red;
}
</style>
</head>
<body>
<div>
<p>paragraph 1</p>
</div>
<div>
<p>paragraph 2</p>
<p>paragraph 3</p>
</div>
<div>
<p>paragraph 4</p>
</div>
</body>
</html>
The paragraphs with the texts “Text1” and “Text4” are the only children in their outer containers, so they are styled with a red font color.
Pseudo-class only-of-type
The only-of-type pseudo-class selects an element that is the only element of a particular type in the container. For example, a single div element, while there can be as many elements of other types in the same container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectors in CSS3</title>
<style>
span:only-of-type {
color: green;
}
p:only-of-type {
color: red;
}
div:only-of-type {
color: blue;
}
</style>
</head>
<body>
<div>
Header
</div>
<p>single paragraph and<span>span element</span></p>
<div>
Footer
</div>
</body>
</html>
Although there is a style defined for the div elements, it will not be applied because there are two div elements in the body container, not one. But body has only one p element, so it will get styled. And also there is only one span element in the p container, so it will be styled as well.
Pseudo-class nth-child
The nth-child pseudo -class allows you to style every second, third element, only even or only odd elements, etc.
For example, we style the even and odd rows of the table:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectors in CSS3</title>
<style>
tr:nth-child(odd) {
background-color: #bbb;
}
tr:nth-child(even) {
background-color: #fff;
}
</style>
</head>
<body>
<h3>Tables</h3>
<table>
<tr>
<td>PHP Turotials</td>
<td>React Turotials</td>
<td>TypeScript Turotials</td>
</tr>
<tr>
<td>Laravel Turotials</td>
<td>Vue Turotials</td>
<td>jQuery Turotials</td>
</tr>
<tr>
<td>JavaScript Turotials</td>
<td>Node Js Turotials</td>
<td>Java Turotials</td>
</tr>
<tr>
<td>HTML Turotials</td>
<td>Photoshop Turotials</td>
<td>SQL Server Turotials</td>
</tr>
<tr>
<td>CSS Turotials</td>
<td>PostgreSQL Turotials</td>
<td>SQLite Turotials</td>
</tr>
<tr>
<td>WordPress Turotials</td>
<td>Object-oriented Programming</td>
<td>Data Format & Types</td>
</tr>
<tr>
<td>MySQL Turotials</td>
<td>Web Features</td>
<td>Error Handling</td>
</tr>
<tr>
<td>MongoDB Turotials</td>
<td>INPUT / OUTPUT</td>
<td>Security</td>
</tr>
</table>
</body>
</html>
To define the style for odd elements, the value “odd” is passed to the selector:
tr:nth-child(odd){}
To style even elements, the value “even” is passed to the selector:
tr:nth-child(even){}
We can also pass the number of the element being styled to this selector:
tr:nth-child(3) { background-color: #bbb; }
In this case, the third line is being styled.
Another possibility is to use a placeholder for the number, which is expressed by the letter n :
tr:nth-child(2n+1) { background-color: #bbb; }
Here the style is applied to every second odd row.
The number before n (in this case 2) represents which child element will be selected next. The number that comes after the plus sign indicates which element to start the selection with, that is, +1 means to start with the first child element.
Thus, in this case, the selection starts with the 1st element, and the next selection is 2 * 1 + 1 = 3rd element, then 2 * 2 + 1 = 5th element, and so on.
For example, if we wanted to select every third element, starting with the second, then we could write:
The :nth-last-child pseudo -class essentially provides the same functionality, only the elements are counted from the beginning, not from the end:
Pseudo-class nth-of-type
The :nth-of-type pseudo – class allows you to select a child element of a specific type by a specific number:
The pseudo -class nth-last-of-type works similarly , only now the elements are counted from the end:
tr:nth-child(3n+2) { background-color: #bbb; }