What Is the :nth-of-type() CSS Selector?
:nth-of-type() selects one or more child elements among their direct siblings of the same node type.
Syntax of the CSS :nth-of-type()
Selector
:nth-of-type()
accepts one argument only. Here is the syntax:
The value
argument can be one of the following:
- A number: For instance, using
3
represents the third child. - The keyword
even
orodd
: We use it to represent even or odd children. - The formula
An+B
: We use it to express a series of numbers. For instance,2n+3
expresses these numbers:[(2x0)+3]
,[(2x1)+3]
,[(2x2)+3]
,[(2x3)+3]
, and so on.
Note the following:
:nth-of-type()
is a CSS pseudo-class selector.- The
:nth-of-type()
selector works on direct siblings only. - In the
An+B
formula,
Examples of the CSS :nth-of-type()
Selector
Below are examples of how to use the CSS :nth-of-type()
pseudo-class selector.
Apply DeepPink to the third <p>
element type
The :nth-of-type()
selector below selects the third <p>
element among its siblings of the same node type.
Assuming the snippet below is the HTML document for the above CSS ruleset, browsers will apply DeepPink
to the third <p>
element only.
The :nth-of-type()
selector works on direct siblings only. For instance, suppose you re-write the HTML snippet above to include nested elements as follows:
The p:nth-of-type(3)
selector will apply DeepPink
only to the fifth <p>
node because it is the third <p>
type of its parent element.
Therefore, if you add one more <p>
node to the <section>
element, the p:nth-of-type(3)
selector will apply DeepPink
to the fifth and sixth <p>
items.
Apply DeepPink to every odd <p>
element type
The :nth-of-type()
selector below selects every <p>
child element with an odd index.
Assuming the snippet below is the HTML document for the above CSS ruleset, browsers will apply DeepPink
to the first and third <p>
elements.
Apply DeepPink to every even <p>
element type
The :nth-of-type()
selector below selects the every <p>
child element with an even index.
Assuming the snippet below is the HTML document for the above CSS ruleset, browsers will apply DeepPink
to the second, fifth, and sixth <p>
elements.
Apply DeepPink to the third <p>
element type, fifth, seventh, and so on
The :nth-of-type()
selector below selects every <p>
child element whose index is a multiple of two (2
) with an offset of three (+3
).
Fun Quiz: If the snippet below is the HTML document for the above CSS ruleset, which elements will the browser style?
Create NPM Package like a pro
Apply DeepPink to the first <p>
element type, third, fifth, and so on
The :nth-of-type()
selector below selects every <p>
child element whose index is a multiple of two (2
) with an offset of negative three (-3
).
Fun Quiz: If the snippet below is the HTML document for the above CSS ruleset, which elements will the browser style?
Apply DeepPink to the first three <p>
element type
The :nth-of-type()
selector below applies DeepPink
to the first three <p>
child elements.
Fun Quiz: If the snippet below is the HTML document for the above CSS ruleset, which elements will the browser style?
:nth-of-type()
vs. :nth-child()
– What’s the Difference?
:nth-of-type()
selects items from a specified group of elements. For instance, selecting a <p>
node from a group of <p>
siblings.
:nth-child()
selects items from a general group of elements. For instance, selecting a <p>
node from a mixed group that includes <h1>
, <div>
, and <section>
.