CSS Structural Pseudo-classes
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:
Style the first <em> element in all <p> elements
In the following example, the selector matches the first <em> element in all <p> elements:
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:
The CSS :lang() Pseudo-class
The :lang() pseudo-class
is used to select elements with a lang attribute with the specified value.
Example
Define the quotation marks for <q> elements with lang="no":
<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>
Try it Yourself »
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
CSS Pseudo-classes Reference
For a complete list of all CSS Pseudo-classes, visit our CSS Pseudo-classes Reference.
