YogeshChauhan . com

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

Relative Length Units in CSSCSSFor In Loop in Swift for BeginnersSwiftWhat is HTMLUnknownElement?HTMLWhat’s new in WordPress 5.5?WordPressHow to Use password_hash and password_verify to Secure Your User’s Data (Especially Passwords)?PHPIs Software Really Eating The World? I don’t think soMisc