Part 1: Pseudo-Classes
Explore CSS pseudo-class selectors to target element states such as hover, active, focus, and validation. Understand how to style links, form inputs, and other elements dynamically to enhance user interaction and web page presentation.
Pseudo-classes
Pseudo-class selectors are predefined keywords that define the state of an element or target a child element. They occur pretty frequently, and we can see them in action when a colon follows an element. An example of this is the :hover selector:
a:hover {
/* Hover is a pseudo-class! */
}
Note: The
:hoverselector selects elements when you mouse over them.
Common pseudo-class selectors
Listed below are some of the most common pseudo-classes grouped into the following categories: state, validation, structural, and relational.
Let’s take a look at them!
State pseudo class selectors
A state pseudo-class selector is used when the user is expected to complete particular actions, such as clicking or hovering over a link.
The :link ...