This content originally appeared on DEV Community and was authored by Tapajyoti Bose

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

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.

Checked

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

Enabled and Disabled

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

Valid and Invalid

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

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

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)

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)

Reference

Thanks for reading

Want to work together? Contact me on Upwork

Connect to me on:

This content originally appeared on DEV Community and was authored by Tapajyoti Bose

Print Share Comment Cite Upload Translate Updates

APA

Tapajyoti Bose | Sciencx (2021-05-23T02:36:02+00:00) Master useful CSS pseudo-classes. Retrieved from https://www.scien.cx/2021/05/23/master-useful-css-pseudo-classes/

MLA

" » Master useful CSS pseudo-classes." Tapajyoti Bose | Sciencx - Sunday May 23, 2021, https://www.scien.cx/2021/05/23/master-useful-css-pseudo-classes/

HARVARD

Tapajyoti Bose | Sciencx Sunday May 23, 2021 » Master useful CSS pseudo-classes., viewed ,<https://www.scien.cx/2021/05/23/master-useful-css-pseudo-classes/>

VANCOUVER

Tapajyoti Bose | Sciencx - » Master useful CSS pseudo-classes. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/23/master-useful-css-pseudo-classes/

CHICAGO

" » Master useful CSS pseudo-classes." Tapajyoti Bose | Sciencx - Accessed . https://www.scien.cx/2021/05/23/master-useful-css-pseudo-classes/

IEEE

" » Master useful CSS pseudo-classes." Tapajyoti Bose | Sciencx [Online]. Available: https://www.scien.cx/2021/05/23/master-useful-css-pseudo-classes/. [Accessed: ]

rf:citation

» Master useful CSS pseudo-classes | Tapajyoti Bose | Sciencx | https://www.scien.cx/2021/05/23/master-useful-css-pseudo-classes/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

What are CSS pseudo-classes?