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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #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
How to check if a link has http or https in it in JavaScript?JavaScriptLearn how to give a temporary name to a column or to a table using SQL AliasesSQL/MySQLHow to create a vertically rotating texts using CSS?CSSWhat’s the difference between visibility: hidden and display: none?CSSfor @each loop in SCSSSCSSRecursive WITH Queries in Postgres (Common Table Expressions)Postgres