nth-of-type Pseudo-class
Learn how to use the nth-of-type() pseudo-class to style specific elements with precision and simplicity.
nanadwumor
- The nth-of-type() pseudo-class selects elements by their position among siblings of the same type.
- It uses the formula an+b, where a is the step size, b is the offset, and n starts from 0.
- The nth-last-of-type() counts from the end, selecting elements in reverse order.
- Odd/even styles improve readability, like alternating colors in lists or tables.
RECOMMENDED ARTICLES
The @import Element – When Is It Used In CSS?
Discover how the [crayon-6ad2bf7e66f34818777717-i/] rule lets you modularize and combine your CSS files like a pro! Function: The [crayon-6ad2bf7e66f53864109773-i/] rule loads one stylesheet inside another. Placement: It must always appear before...
The Style Element in CSS
Learn how to quickly add CSS directly to your HTML using the [crayon-6ad2bf7e67c4d329444883-i/] element without any external files required! Definition: The [crayon-6ad2bf7e67c66678725841-i/] element adds embedded CSS directly inside an HTML...
Alternate Stylesheets in CSS
Discover how native HTML and CSS allow users to switch website themes effortlessly without JavaScript! Persistent Stylesheets: Have no [crayon-6ad2bf7e687f3050104307-i/] and are always active. Preferred Stylesheets: Have a...
The nth-of-type() pseudo-class selects elements based on their position among siblings of the same type. It considers a single type of element at a time.
It’s useful for applying styles to specific elements within a group of similar elements.
The syntax is :nth-of-type(an+b), where a and b are integers.
a is the step size.
The n is a counter and starts from 0.
The b is the offset number.
|
1 2 3 |
p:nth-of-type(2n) { color: blue; } |
This selects all the <p> elements that are placed at even positions starting from 2,4,6 etc. That’s, it selects the 2nd, 4th, 6th, etc., <p> elements.
Another example is,
|
1 2 3 |
li:nth-of-type(3n+1) { background-color: yellow; } |
The offset is 1 so this selects the 1st <li> element, and step size is 3 so it then continues to select any other <li> that is at 3rd position from the first and continues in that order. That’s, it selects the 1st, 4th, 7th, 10th <li> elements etc
We can check the positions :
when n=0, 3n+1=3(0)+1=1 (starting position)
when n=1, 3n+1=3(1)+1=3+1=4
when n=2, 3n+1=3(2)+1=6+1=7 etc
Also,
|
1 2 3 |
div:nth-of-type(3) { border: 1px solid black; } |
will select only the 3rd <div> element and apply the style to it.
Selecting odd/even elements
|
1 2 3 4 5 6 7 8 9 |
/* Even elements */ li:nth-of-type(even) { background-color: lightgray; } /* Odd elements */ li:nth-of-type(odd) { background-color: lightblue; } |
This selects all even-numbered <li> elements and make their background color light gray, and makes the background color of all odd-number <li> elements light blue.
This styling is useful for creating alternating row colors, often used in tables or lists to improve readability.
nth-last-of-type pseudo-class
The :nth-last-of-type() pseudo-class is similar to :nth-of-type(), but it counts elements from the end of the list of sibling elements of the same type instead of from the beginning.
This can be particularly useful when you want to style elements based on their position relative to the end of the group.
For example,
|
1 2 3 |
p:nth-last-of-type(2n) { color: red; } |
This selects all the even-numbered <p> elements starting from the bottom. That’s, it selects the <p> elements that are 2nd-to-last, 4th-to-last, 6th-to-last etc
Another example is,
|
1 2 3 |
div:nth-last-of-type(3) { border: 1px solid black; } |
This will select the <div> element that’s 3rd to the last.
Recent Comments