As Web Dev’s our first instinct is often to add classes to our Html-markup if we need to select specific elements. But in a lot of cases this won’t be necessary and if we are dealing with Cms generated Html-markup this might not even be possible at all. So in this article/video i would like to show you some of the Css pseudo-classes that can be helpful with making these specific selections.
The Css :first-child pseudo-class let’s us select the “first element of a certain type that is the first child of it’s parent”. Please think about and remember this rules because it will become important later on.
For instance if we have an (un)ordered list we can use the :first-child pseudo-class to only target and style the first Li element in the list, like shown in the snippet below.
With the first rule we style all Li elements to have a light grey background. And with the second rule we target only the first Li to override it’s background to be light blue. This will result in a list like shown in the image below.
The Css :last-child is very similar to it’s :first-child counter part, except that, and you guessed it right, it selects the last element of a certain type that is the last child of it’s parent.
In this snippet we first select all Li’s to give them a light grey background, and then we use the second rule to override the background of the last Li to be light blue.
Now a logical assumption would be that we can use the :first-child and :last-child pseudo-classes to select the first and last paragraphs in an article. But here we run into a little problem.
Remember that is asked you to remember this rule “first element of a certain type that is the first child of it’s parent”? Many article’s will start with a heading tag of some sort, making the p element in the example below no longer be “the first child of it’s parent” and thus our :first-child selector will not match the first paragraph.
God for us there is a solution to this little problem. Enter :first-of-type.
The Css :first-of-type pseudo-class is quite similar to the :first-child one, except that :first-of-type, as it;s name hits, will select the first ellement of the specified type. This will allow us to select the first paragraph in an article no matter if it’s the articles first child element or not.
In this code snippet we use the :first-of-type pseudo-class to selectt the first paragraph in an article and style it to have a bigger font-size and font-weight as shown in the image below.
The Css :last-of-type pseudo-class is almost exactly the same as its :first-of-type counter part except that it will select the last occurrence of the specified element like shown in the example below.
In this code snippet we use the :last-of-type pseudo-class to selectt the last paragraph in an article and style it to have a bigger font-size and font-weight as shown in the image below.
The Css :nth-of-type pseudo-class can be used to select the first, second, third etc instance of the specified element in a list by passing it a 1 based integer like shown in the following code example.
In this code snippet we use the first rule to style all Li elements with a light grey background. Than we use :nth-of-type in the second rule and pass it 2 as its argument to select the second Li element to style it with a light blue background. We then do the same in the third rule to select the third Li element and style it with a green background.
The Css :nth-last-of-type pseudo-class works the same as it’s :nth-of-type counterpart except that it’s index starts at the last element in a list.
In this code snippet we use the first rule to style all Li elements with a light grey background. Than we use :nth-last-of-type in the second rule and pass it 2 as its argument to select the second last Li element to style it with a light blue background. We then do the same in the third rule to select the third last Li element and style it with a green background.
Combining with :not()
We can combine the above entioned pseudo-classes with the :not() pseudo-class to “reverse” the effect. In teh example below we have a use case where we give a border-bottom to all Li’s except the last one.
This will result in a list like shown in the image below.
Subscribe and Follow
Thanks for reading/watching and stay safe