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
Combining a class and pseudo-class
Can you combine class and pseudo-class to style elements? Learn how to precisely target and style elements with advanced pseudo-classes in CSS! Combining classes and pseudo-classes styles elements based on both their type and class, such as...
Types of Pseudo-classes
Know the types of Pseudo-classes, master CSS styling with pseudo-classes for precise element targeting and design control! Structural pseudo-classes style elements based on their position or hierarchy in the HTML document, like...
How to use Pseudo-classes in CSS
Discover how pseudo-classes in CSS enhance user interaction and styling! Pseudo-classes apply styles based on user interaction, element position, or relationships between elements. Normal classes are applied directly as attributes, whereas...
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