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 http://tomorrowmeannever.wordpress.com on December 1, 2022.