![[css3.svg]](/images/logo/css3.svg)
CSS3 - Pseudo classes - The complete list
A pseudo class is a keyword added to a css selector, to select element states that aren't necessarily part of the document markup itself.
Types of pseudo-class:
Article continues below Ad.
Ads by Google
Dynamic pseudo-classes
:link
A link.
:visited
A link that been visited.
:hover
The mouse is over the element.
.button:hover, .a:hover {
outline: 1pt solid blue;
}
<button>Hover me Button</button>
<a href="#">Hover me Link</a>
:active
The element is being clicked.
.button:active, .a:active {
background-color: green;
}
<button>Click and Hold</button>
<a href="#">Click and Hold</a>
:focus
The element has the keyboard focus.
.button:focus, .a:focus {
background-color: violet;
}
<button>Focus me Button</button>
<a href="#">Focus me Link</a>
Article continues below Ad.
Ads by Google
UI element pseudo-classes
:enabled
A user interface element that is enabled.
button:enabled {
border: 1pt solid blue;
}
<button>An enabled button</button>
:disabled
A user interface element that is disabled.
button:disabled {
border: 1pt solid red;
}
<button disabled>A disabled button</button>
:checked
A user interface element that is checked. For checkboxes and radio buttons only.
input:checked {
background-color: orange;
}
<div>
<input type="radio" name="genderSelect" id="male" value="m"> <label for="male">Male</label>
<input type="radio" name="genderSelect" id="female" value="f"> <label for="female">Female</label>
</div>
<input type="checkbox" id="over18"><label for="over18">Over 18?</label>
Article continues below Ad.
Ads by Google
Structural pseudo-classes
: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>
Article continues below Ad.
Ads by Google
Other pseudo-classes
:lang
Matches an element based on it's W3C language code.
:lang(de), :lang(fr) {
font-style: italic;
border-bottom: 2pt solid violet;
}
- Good Day
- Bonne journée
- Schönen Tag
<ul>
<li lang="en">Good Day</li>
<li lang="fr">Bonne journée</li>
<li lang="de">Schönen Tag</li>
</ul>
:target
Matches an element whose id is the same the current URL fragment.
:target {
border: 2pt solid blue;
}
Note the URL fragment in the browser address bar. #target-example
<a href="#target-example">Click to target this entry</a>
:not
Introduces a not clause into the selector.
li:not(.enabled) {
color: gray;
}
- Home
- About
- Contact
<ul>
<li class="enabled">Home</li>
<li class="enabled">About</li>
<li>Contact</li>
</ul>
Ads by Google