CSS Pseudo-classes
Pseudo-classes are keywords added to selectors that specify a special state of the selected element(s). For example, you can use them to style an element when a user mouses over it, or style visited and unvisited links differently.
The syntax for a pseudo-class is a colon : followed by the pseudo-class name.
selector:pseudo-class { property: value; }
Dynamic Pseudo-classes
These pseudo-classes are often used with <a> and <button> elements to change styles based on user behavior.
- :link: Selects unvisited links.
- :visited: Selects visited links.
- :hover: Selects an element when the mouse pointer is hovering over it.
- :active: Selects an element that is being activated by the user (e.g., clicked).
- :focus: Selects an element that has gained focus (e.g., an input field via keyboard
Tabor mouse click).
css
a:link { color: blue; }
a:visited { color: purple; }
a:hover { text-decoration: none; }
a:active { color: red; }
input:focus {
border-color: blue;
outline: none;
}Structural Pseudo-classes
These pseudo-classes select elements based on their position in the document tree or their relationship with other elements.
- :first-child: Selects an element that is the first child of its parent.
- :last-child: Selects an element that is the last child of its parent.
- :nth-child(n): A very powerful pseudo-class used to select one or more specific child elements.
ncan be a number, a keyword (even,odd), or a formula (an+b).li:nth-child(3): Selects the 3rd<li>.li:nth-child(even): Selects all even-numbered<li>elements.li:nth-child(2n+1): Selects all odd-numbered<li>elements (starting from the 1st, every 2nd one).
- :nth-of-type(n): Similar to
:nth-child(n), but it only counts elements of the specified type. For example,p:nth-of-type(2)selects the second<p>element, even if it's not the second child of its parent. - :first-of-type: Selects the first child element of a specific type under its parent.
- :last-of-type: Selects the last child element of a specific type under its parent.
- :only-child: Selects an element that has no siblings (i.e., it is the only child of its parent).
- :only-of-type: Selects an element that has no siblings of the same type under its parent.
- :root: Selects the root element of the document. In HTML, the root element is always
<html>. - :empty: Selects elements that have no children (including text nodes).
css
/* The first and last li elements in a list */
li:first-child { font-weight: bold; }
li:last-child { color: gray; }
/* Add background color to odd rows of a table to create zebra stripes */
tr:nth-child(odd) {
background-color: #f2f2f2;
}Other Pseudo-classes
- :not(selector): Selects all elements that do not match the selector in the parentheses.
input:not([type="submit"]): Selects all<input>elements whosetypeis notsubmit.
- :checked: Selects all checked form elements, such as checkboxes (
<input type="checkbox">) or radio buttons (<input type="radio">). - :disabled: Selects all disabled form elements.
Pseudo-classes greatly extend the capabilities of CSS selectors, allowing us to create complex styles that are more dynamic and interactive.