We’ve seen how there are mainly 3 types of CSS selectors:
- generic where
pin CSS targets
- classes where
.introin CSS targets HTML elements with a
- ids where
#logoin CSS targets HTML elements with a
All of these selectors can have pseudo-classes attached to them. A pseudo-class:
- defines a particular state of the element
- is a keyword that starts with a colon
A pseudo-class can’t exist on its own. It must be attached to a selector. The pseudo-class will only define a particular state of that selector.
The syntax looks like this:
There is no space between the selector and the pseudo-class, to signify that they are linked together.
For example, a common pseudo-class used is
:hover, which will apply a CSS style when the targeted element is hovered. Let’s test it on links.
Hover this link and see how it turns red.
The first line defines how all
<a> HTML elements should look like (blue).
The second line defines how
<a> should look like when hovered (red).
The second line targets the same HTML elements but only when something specific happens (in this case, being hovered).
This pseudo-class targets links that have been visited. By default, links are blue and turn purple when you’ve visited them. Google results work like that.
Applying a different for visited links is often overlooked but comes in handy for users browsing a list of results. It easily helps them visualize where they have already been.
This pseudo-class happens when an HTML element is in focus. This is particularly useful for HTML inputs.
outline: none; rule removes the glow from the input.
:first-child and :last-child
These pseudo-classes are related to the HTML hierarchy. They target HTML elements depending on the order in which they appear in the code.
As you can see, no CSS class is applied to the first and last
<li>. Their position in the hierachy defines whether the CSS rule is applied.
If we were to add a 5th list item, and using the same CSS, the styling would automatically change:
This pseudo-class is a more global version of
:nth-child, you can calculate which child element you want to target.
For example, if you want to target the second child, you would use
odd and even
While using a number is straightforward, the
:nth-child comes with 2 keywords:
:nth-child(odd)will target every odd element
:nth-child(even)will target every even element
The n iterator
The most powerful aspect of
:nth-child is how it can target elements based upon calculations by using the
n value increments from zero
0 to the number of child elements present.
What if you want to target every third element?
In our case,
n starts at zero and ends at six.
Computers start counting at zero. And because there are seven elements in our list, we will go up until six, because 0-1-2-3-4-5-6 represents seven items.
You can read
:nth-child(3n) as “Target each element whose position is dividable by 3”. In our case, it targeted both the 3rd and 6th list items:
3 times 0is zero
3 times 1is the 3rd element
3 times 2is the 6th element
n + 1
What if you want to target the 1st item and every third item after that?
3n+1 has two parts:
3nselects every 3rd item
+1offsets the start by 1
This is how the calculations were processed:
3 times 0 plus 1is 1
3 times 1 plus 1is 4
3 times 2 plus 1is 7
n iterator is very versatile. It’s hard to find the right calculation, so just test it out to find the right selection.
There are dozens of pseudo-classes available, some of them for very specific states. The most used ones are the ones we’ve covered.