How Do I Target State On A Page In CSS?
When someone visits your web page and performs certain actions, like hovering the mouse over a link, in the background the web browser dynamically applies different 'state'. This 'state management' is done by the browser by applying something called a pseudo-state to the element.
How the browser applies state is pretty boring, however, as a frontend developer you can use these different states/pseudo-classes to change the style of your elements depending on the state. In the example above, when you hover your mouse over a link the browser will apply the 'hover' pseudo-class to that link. You can then write a CSS selector to target the link in hover state to say apply an underline.
Pseudo-classes should hopefully be fairly simple to grasp. There are loads of pseudo-classes available that allow you to target a whole host of different actions and states. If you want a full list of states, WC3 is always a good source of information, https://www.w3schools.com/css/css_pseudo_classes.asp
To write a selector that targets a pseudo-class, you first proceed the state with a semi-colon, followed by the name of the pseudo-class then your styles.
A few common pseudo-classes are :link, :visited, :hover, :active, :first-child and :nth-child. There are more, and we’re going to see them all in a minute.
What are CSS Pseudo Elements?
The :first-child Pseudo-class