Using the nth-Child Selectors
Description
The nth-child selectors allow you to specify an index to match elements in a particular position.
- :nth-child(n)
Selects elements that are the nth child of their parent.
CSS Version 3 - :nth-last-child(n)
Selects elements that are the nth from last child of their parent.
CSS Version 3 - :nth-of-type(n)
Selects elements that are the nth child of their type defined by their parent.
CSS Version 3 - :nth-last-of-type(n)
Selects elements that are the nth from last child of their type defined by their parent.
CSS Version 3
Each of these selectors takes an argument, which is the index of the element you are interested in; the indexes start at 1.
Example
The following code uses the :nth-child Selector.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body>:nth-child(2) {
border: thin black solid;
padding: 4px;
}<!--from w ww.ja v a 2 s.c o m-->
</style>
</head>
<body>
<a href="http://java2s.com">Visit the website</a>
<p>
I like <span>CSS</span> and HTML.
</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>