Master useful CSS pseudo-classes
Tags: css, html, webdev, ux
Published: 2021-05-23 02:36:02

# What are **CSS** `pseudo-classes`?

A **CSS** `pseudo-class` is a selector which specifies a specific state of the _selected element_. For example `:hover` enables the developer to target the state when an element is being hovered.

In this article, we will cover some helpful `Pseudo Classes`.

# Hover

`:hover` is probably the most used `pseudo-class` in **CSS**. It selects the state of the element when the user hovers over it using a pointing device, like a mouse.

If you are looking to create the hover effect in the demo, you might like [this article](https://dev.to/ruppysuppy/advanced-hover-effect-to-wow-your-visitors-58a3)

{% codepen https://codepen.io/ruppysuppy/pen/GRrbyXa %}

# Focus

`:focus` is used to select the state of an element when the user selects it. To use this `pseudo-class`, you need a selectable component, like a _button_ or an _input_, or manually convert it to a tab-able element using [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).

{% codepen https://codepen.io/ruppysuppy/pen/RwppGyZ %}

# Checked

`:checked` targets radio and checkbox inputs when they are checked or toggled.

{% codepen https://codepen.io/ruppysuppy/pen/gOmmwyz %}

# Enabled and Disabled

`:enabled` and `:disabled` are employed to select the state of an input element when it is enabled and disabled.

{% codepen https://codepen.io/ruppysuppy/pen/vYxxXaZ %}

# Valid and Invalid

`:valid` and `:invalid` target input elements whose input text are valid and invalid.

{% codepen https://codepen.io/ruppysuppy/pen/GRWWjwy %}

# Root

The `:root` **CSS** `pseudo-class` matches the root element of a tree representing the document. In **HTML**, `:root` represents the `<html>` element and is identical to the selector `html`, except that its specificity is higher. It is frequently used to add **CSS** variables.

How to implement the **Dark Mode** is given in [this article](https://dev.to/ruppysuppy/dark-mode-using-css-variables-1m3)

{% codepen https://codepen.io/ruppysuppy/pen/eYBEogP %}

# First Child, Last Child and _nth_ Child 

`:first-child`, `:last-child` and `:nth-child()` targets a component if it is the first, last and the _nth_ child of a parent element.

**NOTE:** `:nth-child` can be used as `:first-child` by using `:nth-child(1)`

{% codepen https://codepen.io/ruppysuppy/pen/abJJBom %}

# First of Type, Last of Type, and _nth_ of Type 

`:first-of-type`, `:last-of-type` and `:nth-of-type` respectively selects the first, last and _nth_ occurrence of a given element in the **HTML** body.

**NOTE:** `:nth-of-type` can be used as `:first-of-type` by using `:nth-of-type(1)`

{% codepen https://codepen.io/ruppysuppy/pen/JjWWRQb %}

# Reference

1. [W3schools](https://www.w3schools.com/css/css_pseudo_classes.asp)
2. [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# Thanks for reading

Want to work together? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Connect to me on:

-   [GitHub](https://github.com/ruppysuppy)
-   [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose-429a601a0)
-   [Portfolio](https://tapajyoti-bose.vercel.app)