English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Complete CSS Selector Reference Manual
Specify each p element to match the nth of the same type in2Background color of同级sibling elements:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
/* Odd-numbered paragraphs */
p:nth-of-type(2n+1) {
color: red;
}
/* Even-numbered paragraphs */
p:nth-of-type(2n) {
color: blue;
}
/* First paragraph */
p:nth-of-type(1) {
font-weight: bold;
}
/* Second paragraph */
p:nth-of-type(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<div>
<div>This section does not participate in counting.</div>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<div>This section does not participate in counting.</div>
<p>This is the third paragraph.</p>
<p>This is the fourth paragraph.</p>
</div>
</body>
</html>Test to see ‹/›:nth-of-type( <nth> ) where <nth> = <an-plus-b> | even | odd
:nth-of-type(n) selector matches the nth sibling element of the same type.
n can be a number, a keyword, or a formula.
Tip: See also :nth-child() selector. This selector matches the nth child element of the parent element. Look at the :nth-child() .
The numbers in the table represent the first browser version number that supports this attribute.
| selector | |||||
|---|---|---|---|---|---|
| :nth-of-type() | 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-of-type(odd)
{
background:#ff0000;
}
p:nth-of-type(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<div>
<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>
</div>
</body>
</html>Test to 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 indices3of the p elements whose indices are multiples specify the background color:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
p:nth-of-type(3n+0)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>This is a title</h1>
<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Third paragraph.</p>
<p>Fourth paragraph.</p>
<p>Fifth paragraph.</p>
<p>Sixth paragraph.</p>
<p>Seventh paragraph.</p>
<p>Eightth paragraph.</p>
<p>Ninth paragraph.</p>
<p><b>Notice:</b> Internet Explorer 8 and earlier versions of browsers do not support :nth-last-child() selector.</p>
</body>
</html>Test to see ‹/›