What is CSS Pseudo Classes?

In CSS (Cascading Style Sheet) pseudo-class a way to style an element based on a change to its state for example when you hover over a button in the browser it automatically adds “:hover” keyword to the selector when working with pseudo-classes.

It can be useful to go into the browser inspector and force the state on the element you’re targeting there are a bunch of different pseudo-classes out there like “:focus” when the user is actively using a form input or disabled when a button has the disabled attribute set to true pseudo classes are also useful when working with a collection of elements.

We can easily target the first or last element in the list relative to its other siblings at this level by targeting in the “first-child” or “last-child” pseudo classes. if we want to be more specific we can use “last-of-type” so it only targets this type of element but what if we want the second third or fourth element in that case we can use “nth-child” and pass an argument for the element that we want to grab or instead of a specific number we might want to use odd or even or maybe we want to grab every fifth element in the list multiply 5 by n to get every 5th element like 5 10 15 and so on.

You can also use addition and subtraction here to create any kind of pattern you want now. Sometimes you might select something in your CSS but what you actually want to style is everything else for that we have the non pseudo class which performs negation notice how when we hover over an element in this list all the other elements are styled but not the actual element that we’re hovering over that’s because we’re targeting all the elements that are not hovered.

Pseudo selectors are especially powerful when working with forms one of my favorites is focus within which allows a parent element to see if one of its children has focus and that’s especially useful if you have something like a drop-down menu and once you keep it open after the user has clicked a button if you’re building a web app with an international audience you might want to know about fileting selector use it to apply custom styles to any element that has a Lang attribute you can use it to make all of your Dutch text orange or combine it with int child to make your German text black red and yellow this has been pseudo classes