Nerd For Tech
Published in

Nerd For Tech

List of CSS pseudo-classes that I use in my work.

CSS has a lot of pseudo-classes. In this article, I will show the pseudo-classes that I can in the front end. The list of pseudo-classes is small + > [] ~ :root :focus :hover :active :nth-child :is :not : has ::after ::before.

:root — apply styles to the document’s root element. That means we can set the style for the whole page. For example, we can set fonts globally.

+ > [] ~

You may not use those classes too much but probably you will see them. Because of that, I need to explain what they are doing.

[] — apply style by its attribute or the attribute value.

~ — apply styles only when elements have the same parent element.

+ — apply styles to elements if it is located right after him.

> — apply styles to child elements.

:focus — apply styles to elements if it focuses.

:hover — apply styles to elements on mouseover.

:active — apply styles to elements when the user clicks on them.

:nth-child( number ) — apply styles to elements by their number. We can set style to odd or even elements or to every 3 elements or only to 2 element.

:is( css selector ) — apply styles to elements only if the element is equal to css selector.

:has( css selector )- apply styles to elements only if the element has a css selector.

:not (css selector) — apply styles to every element that is not a css selector element.

::after — insert content after element.

::before — insert content before the element.

If you need to take a close look at the project here is the link.

Originally published at on December 1, 2022.



NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yurii K

Full-stack developer. In my work, I use Angular and C#. In my free time I write articles for my blog.