CSS3: nth-child () selector
CSS selectors complete reference manual
Examples
Specify each p element matches the background color of the parent element of the second sub-element:
p:nth-child(2)
{
background:#ff0000;
}
{
background:#ff0000;
}
try it"
Definition and Usage
: Nth-child (n) selector matching parent element n th element.
ncan be a number, a keyword, or a formula.
Tip: See selector .The selector matches the same type of the n-th sibling siblings.
Browser Support
Figures in the table represent the first browser to support the version number of the property.
选择器 | |||||
---|---|---|---|---|---|
:nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
More examples
Example 1
<P 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:
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
{
background:#ff0000;
}
p:nth-child(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:
p:nth-child(3n+0)
{
background:#ff0000;
}
{
background:#ff0000;
}
try it"