Filtering by Relationships
In this chapter you will learn:
Relationship selector list
The position selectors are:
| Selector | Description |
|---|---|
| :first-child | Selects all elements that are the fi rst child of their parent. |
| :last-child | Selects all elements that are the last child of their parent. |
| :nth-child() | Selects all elements that are the nth-child of their parent. |
| :only-child | Selects all elements that are the only child of their parent. |
nth-child filter starts at 1
The following code demonstrates the use of filter selectors that match according to specific
relationships, for example :first-child or :only-child.
<!DOCTYPE html> <!--from java 2 s.c o m-->
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js">
</script>
<script>
$(function(){
document.writeln( $("div span:first-child") )
document.writeln( $("div span:last-child") )
document.writeln( $("div span:only-child") )
document.writeln( $("div span:nth-child(2)") )
document.writeln( $("div span:nth-child(2n+1)") )
document.writeln( $("div span:nth-child(even)") )
});
</script>
</head>
<body>
<div>
<span id="a">A</span>
<span id="b">B</span>
<span id="css">CSS</span>
<span id="HTML">HTML</span>
<span id="javascript">Javascript</span>
</div>
<div>
<span id="c">C</span>
<span id="CSS3">CSS3</span>
<span id="HTML5">HTML5</span>
<span id="jQuery">jQuery</span>
<span id="UI">UI</span>
</div>
<div>
<span id="Java">java2s.co m</span>
</div>
</body>
</html>
Next chapter...
What you will learn in the next chapter: