The CSS nth-of-type Selector – How To Target Elements By Type

Marilena

By Marilena

4 min read
Bookmark this post

Hello there! Today, we’ll explore how the CSS nth-of-type() selector works. This powerful CSS selector allows us to target every nth child HTML element of a specific type within its parent container.

Below, I prepared some examples to analyze this amazing pseudo-class thoroughly.

Basic HTML structure

We begin with the HTML structure. We create an <article> HTML element. It contains two headings (<h1> , <h2>) elements. Also, we include some <p> and <div> HTML elements. The example may seem slightly complicated, but it is the right way to understand just how useful 🛠 tool this selector can be. 😃
For now, we’ll maintain the default styling with a white background and black text.

🔖 Please note that this HTML code snippet will be used across all examples.

<article>
  <h1>Explore India</h1>
  <h2>India's Top Ten Attractions</h2>
  <p>Here goes the 1st paragraph about India's attractions</p>
  <p>Here goes the 2nd paragraph about India's attractions</p>
  <h2>India's Food</h2>
  <div>Here goes text about India's cusine</div>
  <div>Here goes text about India's cusine</div>
</article>
HTML

Below, we can see what is rendered on the screen 💻 for now. It’s just a simple article in a newspaper 🗞 or on the internet. At least as articles were once upon a time 😂 just text, no images, and no special styling. Don’t worry; it works well for us!

An article HTML element with<h1>, <h2>, <p>, and <div> elements, all displaying default styling, illustrating the CSS nth-of-type() selector in action.

Targeting a specific HTML element

Now let’s explore how this selector works. We start by using the nth-of-type() selector, preceded by h2, and placing the number 1 inside the parentheses (). This targets the very first <h2> element within our <article> parent.

article h2:nth-of-type(1) {
  color: white;
  background-color: magenta;
}
CSS

In the following image, we can see the result of the applied nth-of-type selector.

An article HTML element containing<h1>, <h2>, <p>, and <div> elements. All have default styling, except the first <h2> element, which has a magenta background and white text, styled using the h2:nth-of-type(1) CSS selector.

Targeting all elements of a specific type

We continue and dive a bit deeper! We place h2 before our nth-of-type() selector, but this time, we add the n inside the parentheses (). By doing so, we target all <h2> elements within our parent element.

The n in nth-of-type(n) enables the selector to match elements at any position among siblings. This means you can apply styles to all matching elements without specifying an exact position, ensuring that every instance is included.. 😎

article h2:nth-of-type(n) {
  color: white;
  background-color: magenta;
}
CSS

In the image below, we notice the styling applied to all <h2> HTML elements after using the nth-last-of-type(n) selector.

An article HTML element containing<h1>, <h2>, <p>, and <div> elements. All have default styling except the <h2> elements, which have a magenta background and white text, styled using the h2:nth-of-type(n) CSS selector.

Targeting elements of various types

Additionally, we have the option to use the nth-of-type() selector to target more than one different type of HTML elements. In our case, we set the p:nth-of-type(1) to target the first <p> element and also the div:nth-of-type(2) to target the second <div> element.

article p:nth-of-type(1),
article div:nth-of-type(2) {
	 color: white;
	 background-color: magenta;
}
CSS

This is how it currently looks on the screen 💻. Cool huh? 😃 ✨

An article HTML element containing<h1>, <h2>, <p>, and <div> elements. All have default styling except the first <p> and the second <div> elements, which have a magenta background and white text, styled using the p:nth-of-type(1) and div:nth-of-type(2) CSS selectors.

🌼 Hope you found my post interesting and helpful. Thanks for being here! 🌼

DigitalOcean Referral Badge
guest
0 Comments
Inline Feedbacks
View all comments

Continue reading

Front, Programming

Make a Unique Folded Corner Effect – Step By Step Guide

Front, Programming

Keyframes in CSS Explained – Make Your Animations Stand Out

Back, Programming

How To Use Absolute Paths In A Node Project (2024)

Programming

Javascript Array Methods – Easy Examples That Make Learning A Blast

Front, Programming

How To Make CSS Reflection – The Easy Way

Front, Programming

The Unique CSS Opacity – Check Out This Amazing Property

Front, Programming

Contrast And Brightness: Empower CSS Filter For Powerful Images

Front, Programming

Opacity And Saturate: Empower CSS Filter For Unique Images

Front, Programming

CSS Last Child Selector – The Most Valuable Selector

Front, Programming

What Does span Do in HTML? Unlocking Its Full Potential

Front, Programming

Most Useful HTML Elements for Maximizing Better Results

Front, Programming

HTML Formatting Elements Made Simple: With Easy And Practical Examples

Subscribe to our newsletter

Dive into the Fun Side of Tech! Posts, News, and More Delivered to Your Inbox!

Intuit Mailchimp