English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:nth-child(an+b) This CSS pseudo-class first finds all sibling elements of the current element, and then sorts them in the order of position from1Start sorting, the selected result is CSS pseudo-class :nth-child within parentheses expression (an+b) The set of elements matched (n=0,1,2,3...). Example:
0n+3 or simply 3 matches the third element.
1n+0 or simply n matches each element. (Compatibility reminder: In Android browsers 4.3 The following version n and 1n do not match in the same way.1n and 1n+0 is consistent and can be chosen according to preference.)
2n+0 or simply 2n matches the position of 2,4,6,8... of the elements (n=0 when,2n+0=0, the 0th element does not exist because it starts from1Start sorting). You can use the keyword even to replace this expression.
2n+1 Matching position for 1,3,5,7... of the elements. You can use the keyword odd to replace this expression.
3n+4 Matching position for 4,7,10,13... of the elements.
Both a and b must be integers, and the index of the first child element of the element is 1. In other words, this pseudo-class matches all elements with indices in the set { an + b; n = 0, 1, 2, ...} of the child elements. It should be noted in particular that an must be written before b, and cannot be written as b+in the form of an.
Complete CSS Selector Reference Manual
Specify the nth child element of the parent element that matches each p element: 2 Background color of an element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
p:nth-child(2)
{
background:orange;
}
</style>
</head>
<body>
<h1>This is a title</h1>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
<p>This is the fourth paragraph.</p>
<p><b>Attention:</b>/b> Internet Explorer 8 Browsers of earlier versions do not support :nth-child() selector.</p>
</body>
</html>Test and see ‹/›:nth-The child(n) selector matches the nth child element of the parent element, without any restriction on the element type.
n It can be a number, a keyword, or an expression.
Tip: See alsoselector. This selector matches the nth sibling element of the same type.
tr:nth-child(2n+1)
Represents the odd rows in an HTML table.
tr:nth-child(odd)
Represents the odd rows in an HTML table.
tr:nth-child(2n)
Represents the even rows in an HTML table.
tr:nth-child(even)
Represents the even rows in an HTML table.
span:nth-child(0n+1)
Represents the first child element that is a span, equivalent to :first-child selector has the same effect.
span:nth-child(1)
selects the first child element in the parent element that is named span.
span:nth-child(-n+3)
Matches the span element among the first three child elements.
The numbers in the table indicate the first browser version that supports this attribute.
| selector | |||||
|---|---|---|---|---|---|
| :nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Odd and even can be used as keywords to match child elements, whose indices are odd or even (the first child node is1). Here, we specify two different background colors for odd and even p elements:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<h1>This is a title</h1>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
<p>This is the fourth paragraph.</p>
<p><b>Attention:</b>/b> Internet Explorer 8 Browsers of earlier versions do not support :nth-child() selector.</p>
</body>
</html>Test and see ‹/›Using the formula (an+ b) Description: a represents the size of a loop, N is a counter (starting from 0), and b is the offset. Here, we specify two different background colors for p elements with all indices3Specify the background color for p elements that are multiples of:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
p:nth-child(3n+0)
{
background:orange;
}
</style>
</head>
<body>
<h1>This is a title</h1>
<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<p>Paragraph 3.</p>
<p>Paragraph 4.</p>
<p>Paragraph 5.</p>
<p>Paragraph 6.</p>
<p>Paragraph 7.</p>
<p>Paragraph 8.</p>
<p>Paragraph 9.</p>
<p><b>Attention:</b>/b> Internet Explorer 8 Browsers of earlier versions do not support :nth-child() selector.</p>
</body>
</html>Test and see ‹/›