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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
A simple example on grid ‘auto-fill’ vs ‘auto-fit’CSSDebugging in WordPress Part 3: SCRIPT_DEBUG and SAVEQUERIESWordPressHow to show and hide an element on click in React?ReactHow to import MySQL small sample database into phpMySQL?SQL/MySQLHow to send and receive query strings via links in Angular 9?AngularKeyValuePipe in Angular 9Angular