【My Study Note】Pseudo-classes
Pseudo-classes
Pseudo-classes allow you to select elements based on their state. Such as hover or invalid state.
There isn’t a broadly accepted classification for pseudo-classes, you can group them in terms of general similarities and their purpose.
Some examples
- User Action States
- Form States
- Specific Position-based States
User Action States
- :hover -> This changes the style of an element when a cursor hovers over it
- :active -> This styles an element only while a user actively presses and holds the mouse button
- :focus -> This focuses styling on the element that you use it for
These pseudo-classes have an effect while a user is actively engaging with a HTML element.
Form States
- :disabled and :enabled -> generally used for buttons
- :checked and :indeterminate -> used for checkboxes
- :valid and :invalid -> used in case of fields like emails and phone numbers
They usually come in pairs and target the different states that elements can have.
Specific Position-based States
- :first-of-type
- :last-of-type
- :nth-of-type()
- :nth-last-of-type()
They allow you to target specific items, for instance, a specific list item among the list elements.