CSS Pseudo Classes

Learn the basics of CSS Pseudo Classes

Pseudo classes are predefined keywords that are used to select an element based on its state or to target a specific child. They start with a single colon :. They can be used as part of a selector and are very useful for styling active or visited links, changing the style on hover, focus, or targeting the first child or odd rows. They are handy in many cases.

These are the most popular pseudo classes you will likely use:

Pseudo class	Targets
`:active`	an element being activated by the user (e.g., clicked), mostly used on links or buttons
`:checked`	a checkbox, option, or radio input types that are enabled
`:default`	the default in a set of choices (e.g., option in a select or radio buttons)
`:disabled`	a disabled element
`:empty`	an element with no children
`:enabled`	an enabled element (opposite to `:disabled`)
`:first-child`	the first child of a group of siblings
`:focus`	the element with focus
`:hover`	an element hovered with the mouse
`:last-child`	the last child of a group of siblings
`:link`	a link that has not been visited
`:not()`	any element not matching the selector passed (e.g., `:not(span)`)
`:nth-child()`	an element matching the specified position
`:nth-last-child()`	an element matching the specific position, starting from the end
`:only-child`	an element without any siblings
`:required`	a form element with the `required` attribute set
`:root`	represents the `html` element, similar to targeting `html` but more specific
`:target`	the element matching the current URL fragment (for inner navigation on the page)
`:valid`	form elements that have been successfully validated client-side
`:visited`	a link that has been visited

Let’s do an example. A common one, actually. You want to style a link, so you create a CSS rule to target the a element:

1
2
3

a {
 color: yellow;
}

Things seem to work fine until you click one link. The link goes back to the predefined color (blue) when you click it. Then, when you open the link and go back to the page, the link is now blue.

Why does that happen?

Because the link changes state to :active when clicked, and when it’s been visited, it is in the :visited state. This state persists until the user clears the browsing history.

So, to correctly make the link yellow across all states, you need to write:

a,
a:visited,
a:active {
 color: yellow;
}

:nth-child() deserves a special mention. It can be used to target odd or even children with :nth-child(odd) and :nth-child(even). It is commonly used in lists to color odd lines differently from even lines:

ul:nth-child(odd) {
 color: white;
 background-color: black;
}

You can also use it to target the first 3 children of an element with :nth-child(-n+3). Or you can style 1 in every 5 elements with :nth-child(5n).

Some pseudo classes are used specifically for printing, like :first, :left, and :right. You can target the first page, all left pages, and all right pages, which are usually styled slightly differently.

tags: [“CSS”, “Pseudo Classes”, “Web Development”, “Front-end Development”]