CSS :nth-of-type() Selector
Example
/* Sets the background color to red on the second p element */
p:nth-of-type(2) {
background: red;
}Meaning
The :nth-of-type() selector selects the element that is the nth child of its parent that is its type.
The :nth-of-type() pseudo-class is specified with a single argument, which represents the pattern for matching elements.
Note: There is no way to select the nth-of-class using this selector. The selector looks at the type only when creating the list of matches. You can however apply CSS to an element based on :nth-of-type() location and a class, as shown in the example above.
Version: CSS3
Standard Syntax
:nth-of-type(n|odd|even) {
css declarations;
}Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Status
Parameter values
The following table describes the values of this selector parameter.
| Value | Description |
|---|---|
| n | Specifies the number to eelects the element that is the nth child of its parent that is its type. |
| odd | Defines elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc. |
| even | Defines elements whose numeric position in a series of siblings is even: 2, 4, 6, etc. |