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
identifiers in CSS
The secret power of CSS identifiers, the tiny names that give you full control over your styles! Identifiers are custom CSS names you create. CSS treats similar names with different cases as unique. Used in list counters like...
Images in CSS
Did you know CSS can create images without using a single file? CSS uses URLs to display images. [crayon-68e61b8ded7a8814723556-i/] serves images by device quality. Gradients generate images with colors only. Useful for backgrounds, designs, and...
inherit, initial, unset in CSS
Tiny CSS keywords can reset, copy, or undo styles with just one word. Keywords control styles without numbers inherit copies, initial resets, unset smart reset all applies to most properties, safer to limit revert returns to browser/user defaults...
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