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
elements
In the following example, the selector matches all
elements that is the first child of any element:
Example
p:first-child
{
color: blue;
}
Style the first element in all elements
In the following example, the selector matches the first element in all elements: elements In the following example, the selector matches all elements in elements that are the first child of another element: The There are many more structural pseudo-classes available: Note: For a complete list of all CSS Pseudo-classes, visit our CSS Pseudo-classes Reference.Example
p em:first-child
{
color: blue;
}
Style all elements in all first child
Example
p:first-child em
{
color: blue;
}
The CSS :lang() Pseudo-class
: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>
Other Structural Pseudo-classes
: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