Yogesh Chauhan's Blog

first-of-type and last-of-type selectors in CSS

in CSS on March 28, 2021

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:


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Configuring Modules with @forward rule in SCSS (Sass)SCSSHow to select multiple values in React dropdown?ReactHow to change style of nth-child using jQuery?jQueryWhat is XP (Extreme Programming) and When should it be used?MiscellaneousHTML Copyright SymbolHTMLWhat’s the difference between a Framework and a Library?Miscellaneous