![[css3.svg]](/images/logo/css3.svg)
CSS3 - Pseudo classes - Structural
:root
Selects the root element of the document.
For an HTML document, the root is html. The root selector has higher specificity than the html element selector.
:root {
background-color: darkgray;
}
<button onclick="changeRoot()">Click to change root</button>
<script>
function changeRoot() {
var style = document.createElement('style')
style.type = 'text/css'
style.innerHTML = ':root { background-color: darkgray; }'
document.getElementsByTagName('head')[0].appendChild(style);
}
</script>
:nth-child
Select a child element based on it's position within it's parent.
span:nth-child(an+b) {
background-color: darkred;
color: white;
}
nth-child(3):
nth-child(3n):
nth-child(3n-1):
nth-child(3n+1):
nth-child(even):
nth-child(2n):
nth-child(odd):
nth-child(2n-1):
nth-child(n+3):
nth-child(-n+6):
nth-child(n+3):nth-child(-n+9):
nth-child(n+3):nth-child(odd):nth-child(-n+9):
nth-child(n+3):nth-child(even):nth-child(-n+9):
:nth-last-child
Select a child element based on it's position within it's parent, but counting from the end.
span:nth-last-child(an+b) {
background-color: darkred;
color: white;
}
nth-last-child(3):
nth-last-child(3n):
nth-last-child(3n-1):
nth-last-child(3n+1):
nth-last-child(even):
nth-last-child(odd):
Article continues below Ad.
Ads by Google
nth-child vs. nth-of-type
*:nth-child(2) select the second child element, regardless of it's type.
div:nth-child(2) selects the second child element only if it is a div. If the second child is not a div, the css rule won't be applied.
div:nth-of-type(2) selects the second element of all children that are div elements.
If your child elements are all of the same type, then nth-child is the same as :nth-of-type.
:nth-of-type
The same as :nth-child, except that it select items of the specified type only.
E.g. span.
span:nth-of-type(an+b) {
background-color: red;
color: white;
}
:nth-last-of-type
The same as :nth-last-child, except that it select items of the specified type only.
E.g. span.
span:nth-last-of-type(an+b) {
background-color: red;
color: white;
}
:first-child
Selects the first child element.
span:first-child {
background-color: darkred;
color: white;
}
first-child:
:last-child
Selects the last child element.
span:last-child {
background-color: darkred;
color: white;
}
last-child:
:first-of-type
The same as :first-child except that it select the first child of the specified type.
E.g. span
span:first-of-type {
background-color: darkred;
color: white;
}
:last-of-type
The same as :last-child, except that it select the last child of the specified type.
E.g. span.
span:last-of-type {
background-color: darkred;
color: white;
}
Article continues below Ad.
Ads by Google
first-child vs. first-of-type and last-child vs. last-of-type
*:first-child select the first child element, regardless of it's type.
div:first-child selects the first child only if it is a div. If the first child is not a div, the css rule won't be applied.
div:first-of-type selects the first element of all children that are div elements.
If your child elements are all of the same type, then first-child is the same as :first-of-type.
:only-child
Selects an element that is the only child of it's parent.
span:only-child {
background-color: darkred;
color: white;
}
The first line matches the rule. The second line does not.
:only-of-type
The same as :only-child except that it first selects all children of the specified type,
and then matches if there is only one child of that type.
span:only-of-type {
background-color: darkred;
color: white;
}
:empty
An element that is completely empty.
p:empty {
border: 1pt solid red;
}
p:empty::after {
content: "This paragraph was Empty!";
}
<p></p>
Ads by Google