CSS :first-of-type selector
The :first-of-type selector, as per the name suggests, matches every FIRST element that’s a child of its parent element but only with a certain type.
For e.g. if there are 2 p tags in a body without a parent element then you can use p:first-of-type to target the first element.
Just like this:
Using :first-of-type selector is same as using :nth-of-type(1).
Just like this example:
How to target every first element of a different types/tags using CSS :first-of-type selector?
To change style of every first element inside a parent element, all you need to do is just target the parent element with :first-of-type selector.
Just like this:
CSS :last-of-type selector
The :last-of-type selector, as per the name suggests, matches every LAST element that’s a child of its parent element but only with a certain type.
For e.g. if there are 2 p tags in a body without a parent element then you can use p:last-of-type to target the last element.
Just like this:
Using :last-of-type selector is same as using :nth-last-of-type(1).
Just like this example:
How to target every last element of a different types/tags using CSS :last-of-type selector?
To change style of every last element inside a parent element, all you need to do is just target the parent element with :last-of-type selector.
Just like this:
css selectors first-of-type last-of-type nth-child nth-of-type pseudo-elements
