CSS Structural
Structural pseudo-classes select elements based on their position in the document tree.
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 <p> elements that is the first child of any element:
Example
Example Code
cssp:first-child
{
color: blue;
}Style the first element in all
elements
In the following example, the selector matches the first <em> element in all <p> elements:
Example
Example Code
cssp em:first-child
{
color: blue;
}Style all elements in all first child
elements
In the following example, the selector matches all <em> elements in <p> elements that are the first child of another element:
Example
Example Code
cssp:first-child em
{
color: blue;
}The CSS :lang() Pseudo-class
The :lang() pseudo-class
is used to select elements with a lang attribute with the specified value.
Example
Example Code
htmlOther 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.