Loading lesson path
Concept visual
Start from A
Formula
Structural pseudo - classes select elements based on their position in the document tree.Formula
: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:{
color: blue;
}Formula
Style the first < em > element in all < p > elements
In the following example, the selector matches the first < em > element in all < p > elements:{
color: blue;
}Formula
Style all < em > elements in all first child < p > elementsIn the following example, the selector matches all <em> elements in <p> elements that are the first child of another element:
{
color: blue;
}:lang()
Formula
pseudo - class is used to select elements with a lang attribute with the specified value.Formula
Define the quotation marks for < q > elements with lang ="no":<html> <head> <style>
q:lang(no) {
quotes: "~" "~";
}</style> </head> <body>
Formula
< p > Some text < q lang ="no"> A quote in a paragraph </q >Some text.</p> </body> </html>
Formula
There are many more structural pseudo - classes available:
:last - childFormula
:nth - child(n)Formula
:nth - last - child(n)Formula
:only - childFormula
:first - of - typeFormula
:last - of - typeFormula
For a complete list of all CSS Pseudo - classes, visit our
CSS Pseudo - classes Reference.