Today's post comes a little later than usual. Last week, we talked about Pseudo Elements: the ":before" and ":after" elements. These allow us to create fun aesthetic improvements to various elements of our websites. Today however, we're talking about pseudo classes!
Pseudo classes are similar to pseudo elements in the sense that they don't exist in the HTML markup. Instead, a pseudo class can be thought of as a "state" of an element. Is it being hovered on or actively clicked? Maybe it's a link that's been visited before? Is the element the first child of it's parent? Perhaps you want to target every 2nd element with a certain class? These things are all possible with pseudo classes!
Basic Pseudo Class States
The basic pseudo class states are:
- :visited signifies a link that has been previously visited. By default, most browsers make links purple.
- :hover signifies an element that has the cursor hovering over it.
- :active signifies an element that is currently being clicked.
- :not() signifies an element that does not have any of the classes or IDs inside the parenthesis
You can also use a pseudo class to select specific elements based on their location within the HTML markup:
- :first-child signifies an element that is the first child of its parent.
- :last-child signifies an element that is the last child of its parent.
- :first-of-type signifies an element that is the first of its type among its group of sibling elements.
- :last-of-type signifies an element that is the last of its type among its group of sibling elements.
- :nth-child(n) signifies an element that is the nth child of its parent.
- :nth-of-type(n) signifies an element that is the nth of its type among its group of sibling elements.
Form Oriented Selectors
The following pseudo classes can be used to select form elements based on their status:
- :checked signifies a checkbox that is currently checked.
- :in-range signifies an input whose value is in between its min and max values.
- :valid signifies an input whose value is valid for the type of input
- :invalid signifies an input whose value is NOT valid for the type of input
- :disabled signifies an input that has been disabled via the "disabled" attribute.
Previous Lesson Next Lesson