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:


amazon

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 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS? #Aug 1 What is Zdog? #Aug 1 How to add before after image effect using pure CSS? #Jul 31 Add animation to your skills bar using CSS #Jul 31 Use SwiperJS to create mobile touch sliders fast
You might also like these
What does it mean by Continuous Integration, Continuous Delivery and Continuous Deployment?Miscellaneous3 Common Usability Mistakes In Web DesignUI/UXIntroduction to components and templates Part 4: Pipes and DirectivesAngularCSS Attribute SelectorsCSSLearn to Establish Connection using MySQLi (object-oriented), MySQLi (procedural) and PDO with Example CodePHPThe difference between isFinite() method and isFinite() function in JavaScriptJavaScript