CSS3: nth-of-type () selector
CSS selectors complete reference manual
Examples
Specify each p element matches the background color of the same type in the first two brothers sibling elements:
{
background:#ff0000;
}
try it"
Definition and Usage
: Nth-of-type (n) selector to match the same type of the n-th sibling siblings.
n can be a number, a keyword, or a formula.
Tip: See : nth-child () selector.The selector matches the parent element n th element. AT at The Look : Nth-Child () .
Browser Support
Figures in the table represent the first browser to support the version number of the property.
选择器 | |||||
---|---|---|---|---|---|
:nth-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
More examples
Example 1
Odd and even can be used as a keyword to match the sub-element is used, its index is odd or even (the index of the first child is 1).
Here, we specify two different background colors for the odd and even p elements:
{
background: # ff0000;
}
p: nth-of-type (even)
{
background: # 0000ff;
}
try it"
Example 2
Using the formula (an + b) Description: The size of a representative of a cycle, N is a counter (starting at 0), and b is the offset.
Here we all indexes are multiples of three p element specifies the background color:
{
background: # ff0000;
}
try it"