<aside> ➡️ POST MOVED TO GOOGLE DOCS FOR COLLABORATION PURPOSES
</aside>
Today, it’s all about Pseudo-classes: the must-have, the unusual and even the brand new experimental ones!
Pseudo-classes allow us to target the state of an element. Pseudo-classes themselves are keywords that we add after our selector.
For example, :hover is a pseudo-class! A user expects some kind of sign if an element is interactive.
Pseudo-classes let us apply styles to mouse/keyboard interactions (ex: :hover, :active, :focus), fields based on their content (ex: :blank, :valid, :checked) or their position in the DOM (ex: :first-child, :nth-child(), :root).
<aside>
🗒️ That syntax might remind you of pseudo-elements like ::before and ::selection. Pseudo-classes and pseudo-elements are different things.
Pseudo-classes target states of an element like hover, disabled, or visited. Pseudo-elements affect elements that aren’t explicitly written to the DOM, like a before element, a backdrop, or the selection.
This post will focus on pseudo-classes only.
</aside>
Relative selectors are any pseudo-class used to select an element based on its position on the DOM.
You’ve probably used :first-child or :nth-child in the past; they are super useful whenever the position in the parent matters.
Another example of a relative selector that I use all the time for styling tables is the nth-child(even) selector that selects even elements.
There is also the common trick of setting a margin-bottom to some elements and making it 0px on the :last-child - however we have more up-to date ways of doing this nowadays.
<aside> 💡 For more information, read the MDN documentation for relative selectors, referred as Tree structural pseudo-classes.
</aside>
A user interaction selector is any selector responding to a user input like a mouse click, a hover, or an element being focused with the keyboard.
In CSS development, we use these a lot, so let’s dive into them!
First, let’s talk about the links. You might know that we can use the :visited pseudo-class to target any link that was visited. That is the purple color we see on the Google results we’ve already visited:
Results from Google. The link we visited already appears in purple instead of blue, stylized using the visited pseudo-class.
We can also target non-visited links by using the :link pseudo-class.