CSS Pseudo-classes
CSS pseudo-classes are special selectors that allow you to target and style elements based on their state or position in the document tree.
The pseudo-classes start with a colon (:) and are used in conjunction with regular selectors to apply styles to specific elements.
Here are some commonly used CSS pseudo-classes:
The hover
Targets an element when the mouse cursor is hovering over it.
As an example:
Editor
The active
Targets an element while it is being clicked or activated.
As an example:
Editor
The focus
Targets an element when it has focus (e.g. when it is selected by the user or when the user tabs through the page).
As an example:
Editor
The visited
Targets links that have already been visited by the user.
As an example:
Editor
The nth-child()
Targets elements that are a specified child of their parent element (e.g. :nth-child(3) targets the third child element).
As an example:
Editor
In this example:
- We have a table with four rows of data.
- We use the
:nth-childpseudo-class to apply a background color to every even row, creating a striped effect. - We achieve this by selecting every second row using the
evenkeyword and applying a new background color to the selected rows.
The first-child
Targets the first child element of its parent element.
As an example:
Editor
The last-child
Targets the last child element of its parent element.
As an example:
Editor
The not()
Targets elements that do not match the specified selector.
As an example:
Editor
All Pseudo Classes
Here's a list of all the pseudo-classes:
| Pseudo-class | Description | Example |
|---|---|---|
| :active | Selects the active link | a:active { color: red } |
| :checked | Selects the checked element | input:checked { background-color: yellow } |
| :disabled | Selects the disabled element | input:disabled { opacity: 0.5 } |
| :empty | Selects elements that have no children | p:empty { display: none } |
| :enabled | Selects the enabled element | input:enabled { border-color: green } |
| :first-child | Selects the first child of an element | li:first-child { font-weight: bold } |
| :focus | Selects the element that has focus | input:focus { border-color: blue } |
| :hover | Selects the element that the user is hovering over | a:hover { text-decoration: underline } |
| :lang | Selects elements with a specified language attribute | p:lang(en) { font-style: italic } |
| :last-child | Selects the last child of an element | li:last-child { font-weight: bold } |
| :not | Selects all elements that do not match a selector | :not(p) { margin-bottom: 10px } |
| :nth-child | Selects elements based on their position among siblings | li:nth-child(odd) { background-color: lightgray } |
| :nth-last-child | Selects elements based on their position among siblings, counting from the last child | li:nth-last-child(even) { background-color: lightgray } |
| :only-child | Selects elements that are the only child of their parent | p:only-child { font-size: 24px } |
| :root | Selects the root element of the document | :root { --main-color: red } |
| :target | Selects the target element of an anchor link | #section1:target { background-color: yellow } |
| :checked | Selects a radio button or checkbox that is checked | input[type="checkbox"]:checked { background-color: yellow } |
| :default | Selects the default button in a form | button:default { border-color: blue } |
| :dir() | Selects elements with a specified text direction | p:dir(ltr) { text-align: left } |
| :drop | Selects elements that are being dragged | div:drop { border: 2px dashed gray } |
| :first-of-type | Selects the first element of its type among siblings | p:first-of-type { font-size: 24px } |
| :fullscreen | Selects an element that is in full-screen mode | video:fullscreen { width: 100% } |
| :in-range | Selects an input element with a value within a specified range | input[type="range"]:in-range { background-color: green } |
| :indeterminate | Selects a checkbox that is in an indeterminate state | input[type="checkbox"]:indeterminate { opacity: 0.5 } |
| :invalid | Selects an input element with an invalid value | input:invalid { border-color: red } |
| :last-of-type | Selects the last element of its type among siblings | p:last-of-type { font-size: 24px } |
| :link | Selects an unvisited link | a:link { color: blue } |
| :nth-of-type | Selects elements based on their position among siblings, counting only elements of the same type | p:nth-of-type(odd) { background-color: lightgray } |
| :only-of-type | Selects elements that are the only element of their type among siblings | h1:only-of-type { font-size: 36px } |
| :optional | Selects an input element that is not required | input:optional { border-color: gray } |
| :out-of-range | Selects an input element with a value outside a specified range | input[type="range"]:out-of-range { background-color: red } |
| :required | Selects an input element that is required | input:required { border-color: green } |
| :valid | Selects an input element with a valid value | input:valid { border-color: green } |
| :visited | Selects a visited link | a:visited { color: purple } |