CSS pseudo-classes are used to define a special state of an element. Here is a comprehensive list of commonly used CSS pseudo-classes:
:active
Styles an element that is being activated by the user.
button:active {
background-color: yellow;
}
:checked
Styles a checkbox or radio button that is checked.
input:checked {
background-color: blue;
}
:default
Styles the default option among a set of choices.
input:default {
border: 2px solid green;
}
:disabled
Styles an element that is disabled.
input:disabled {
background-color: gray;
}
:empty
Styles an element that has no children.
div:empty {
display: none;
}
:enabled
Styles an element that is enabled.
input:enabled {
border: 1px solid blue;
}
:first-child
Styles an element that is the first child of its parent.
p:first-child {
color: red;
}
:first-of-type
Styles an element that is the first of its type among its siblings.
p:first-of-type {
font-weight: bold;
}
:focus
Styles an element that has focus.
input:focus {
outline: 2px solid blue;
}
:focus-visible
Styles an element that has focus and is visible to the user.
input:focus-visible {
outline: 2px solid blue;
}
:focus-within
Styles an element that has focus within it or any of its descendants.
form:focus-within {
border: 2px solid blue;
}
:hover
Styles an element when the user hovers over it.
a:hover {
color: red;
}
:in-range
Styles an input element with a value within a specified range.
input:in-range {
background-color: lightgreen;
}
:indeterminate
Styles a checkbox that is in an indeterminate state.
input:indeterminate {
background-color: orange;
}
:invalid
Styles an input element with an invalid value.
input:invalid {
border-color: red;
}
:last-child
Styles an element that is the last child of its parent.
p:last-child {
color: blue;
}
:last-of-type
Styles an element that is the last of its type among its siblings.
p:last-of-type {
font-style: italic;
}
:link
Styles an unvisited link.
a:link {
color: blue;
}
:not()
Styles elements that do not match a specified selector.
p:not(.special) {
color: gray;
}
:nth-child()
Styles elements that are the nth child of their parent.
p:nth-child(2) {
color: purple;
}
:nth-last-child()
Styles elements that are the nth child of their parent, counting from the last child.
p:nth-last-child(2) {
color: orange;
}
:nth-last-of-type()
Styles elements that are the nth of their type among their siblings, counting from the last one.
p:nth-last-of-type(2) {
color: brown;
}
:nth-of-type()
Styles elements that are the nth of their type among their siblings.
p:nth-of-type(2) {
color: teal;
}
:only-child
Styles an element that is the only child of its parent.
p:only-child {
color: pink;
}
:only-of-type
Styles an element that is the only one of its type among its siblings.
p:only-of-type {
font-size: 2em;
}
:optional
Styles input elements that are optional.
input:optional {
border: 1px solid green;
}
:out-of-range
Styles input elements with a value outside a specified range.
input:out-of-range {
background-color: lightcoral;
}
:placeholder-shown
Styles an input element when the placeholder text is visible.
input:placeholder-shown {
color: gray;
}
:read-only
Styles elements that are read-only.
input:read-only {
background-color: lightyellow;
}
:read-write
Styles elements that are editable.
input:read-write {
background-color: lightgreen;
}
:required
Styles input elements that are required.
input:required {
border: 2px solid red;
}
:root
Styles the root element of the document.
:root {
--main-color: coral;
}
:scope
Styles elements that are a reference point for selectors.
:scope {
border: 2px solid blue;
}
:target
Styles an element that is the target of a URL fragment.
#section1:target {
background-color: yellow;
}
:valid
Styles input elements with a valid value.
input:valid {
border: 2px solid green;
}
:visited
Styles a link that has been visited.
a:visited {
color: purple;
}
These pseudo-classes enable dynamic and state-based styling for elements, enhancing the interactivity and usability of web pages.
