Flash cards
Review the key moves
What is the main idea behind CSS Structural Pseudo-classes?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
p:___-child {Put the learning moves in the order that makes the concept easiest to apply.
Structural Pseudo-classes
Structural pseudo-classes select elements based on their position in the document tree.
The CSS :first-child Pseudo-class
The :first-child pseudo-class matches a specific element that is the first child of another element.
Style all first child <p> elements
In the following example, the selector matches all <p> elements that is the first child of any element:
Example
p:first-child {
color: blue;
}Live preview
Style the first <em> element in all <p> elements
In the following example, the selector matches the first <em> element in all <p> elements:
Example
p em:first-child {
color: blue;
}Live preview
Style all <em> elements in all first child <p> elements
In the following example, the selector matches all <em> elements in <p> elements that are the first child of another element:
Example
p:first-child em {
color: blue;
}Live preview
The CSS :lang() Pseudo-class
The :lang() pseudo-class is used to select elements with a lang attribute with the specified value.
Example
<html>
<head>
<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>Live preview
Other Structural Pseudo-classes
There are many more structural pseudo-classes available:
- :last-child - Matches the last child of a parent
- :nth-child(n) - Matches the nth child of a parent
- :nth-last-child(n) - Matches the nth child from the end
- :only-child - Matches an element that is the only child
- :first-of-type - Matches the first element of its type
- :last-of-type - Matches the last element of its type