Структурные псевдоклассы
Структурные псевдоклассы выбирают элемент по его положению в дереве документа.
Псевдокласс CSS :first-child
:first-child соответствует элементу только тогда, когда он является первым дочерним элементом другого элемента.
Стилизация всех элементов <p>, являющихся первым дочерним элементом
Выбирается любой элемент <p>, являющийся первым дочерним элементом своего родителя.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Child Paragraph</title>
<style>
p:first-child {
color: blue;
}
</style>
</head>
<body>
<p>This is the first child paragraph of the body (blue).</p>
<p>This is not the first child (not blue).</p>
<div>
<p>This is the first child paragraph of the div (blue).</p>
<p>This is not the first child (not blue).</p>
</div>
</body>
</html>
Стилизация первого элемента <em> во всех элементах <p>
Внутри каждого элемента <p> выбирается первый элемент <em>.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Child em in p</title>
<style>
p em:first-child {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph with <em>first em (blue)</em> and <em>second em (not blue)</em>.</p>
<p>Another paragraph with <em>first em (blue)</em> and more text.</p>
</body>
</html>
Стилизация всех элементов <em> во всех элементах <p>, являющихся первым дочерним элементом
Здесь выбирается каждый элемент <em> внутри элемента <p>, который сам является первым дочерним элементом другого элемента.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>em in First Child p</title>
<style>
p:first-child em {
color: blue;
}
</style>
</head>
<body>
<p>This is the <em>first child paragraph</em>. All <em>em elements</em> here are blue.</p>
<p>This is not the first child. <em>This em is not blue</em>.</p>
<div>
<p>This is the first child of the div. <em>This em is blue</em>.</p>
<p>Not the first child. <em>This em is not blue</em>.</p>
</div>
</body>
</html>
Псевдокласс CSS :lang()
Чтобы выбрать элементы по значению их атрибута lang, используйте псевдокласс :lang().
Пример
Здесь элементы <q> с lang="no" получают собственные кавычки.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The :lang() Pseudo-class</title>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
Другие структурные псевдоклассы
Семейство структурных псевдоклассов этим не ограничивается. Среди дочерних элементов родителя :last-child выбирает последний, :nth-child(n) — n-й, :nth-last-child(n) — n-й с конца, а :only-child — элемент, у которого нет соседних элементов. По типу :first-of-type выбирает первый элемент своего типа, а :last-of-type — последний.