:nth-of-type() Back
- The
:nth-of-type()
is a CSS pseudo-class selector that allows you to select elements of the same type based on their index (source order) inside their container. - You can also pass positive number, predefined keywords(even, odd) and formula to
nth-of-tpye()
likenth-last-child()
.
Case: learning :nth-of-type()
See the Pen YwgXeQ by aleen42 (@aleen42) on CodePen.
Note
- Using some tools to help dealing with the calculations for
nth-child
by visualizing.- CSS3 structural pseudo-class selector tester by Lea Verou
- NTH-TEST – nth-child and nth-of-type tester by Paul Maloney
- There is a pseudo-class selector that has a similar functionality to that of
:nth-of-type()
, that selector is the:nth-last-of-type()
selector.:nth-last-of-type()
is similar to:nth-of-type()
, except that instead of iterating through the elements from the first one downwards, it starts iterating from the last element up.