Structural Pseudo-classes
An element's position in the document tree is what structural pseudo-classes use to select it.
The CSS :first-child Pseudo-class
:first-child matches an element only when it is the first child of another element.
Style all first child <p> elements
Any <p> element that is the first child of its parent is selected.
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>
Style the first <em> element in all <p> elements
Inside every <p> element, the first <em> element is selected.
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>
Style all <em> elements in all first child <p> elements
Here the selection is every <em> element inside a <p> element that is itself the first child of another element.
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>
The CSS :lang() Pseudo-class
To select elements by the value of their lang attribute, use the :lang() pseudo-class.
Example
Here <q> elements with lang="no" get their own quotation marks.
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>
Other Structural Pseudo-classes
The family of structural pseudo-classes goes further. Among the children of a parent, :last-child picks the last one, :nth-child(n) the nth, :nth-last-child(n) the nth counted from the end, and :only-child an element with no siblings. By type, :first-of-type picks the first element of its type and :last-of-type the last.