The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.
n can be a number, a keyword, or a formula.
Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of a particular type, of its parent.
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(2) {
background: #ff0000;
}
p:nth-child(4) {
background: #ff0000;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>
</body>
</html>
Result:
Line <p> 2 và <p> 4: have color #ff0000.
0 nhận xét: