Selecting Child Elements
Description
The child selector matches elements that are directly contained in matched elements.
- Selector: firstSelector > secondSelector
- Matches: Selects elements that match the secondSelector and are immediate descendants of the elements matched by the firstSelector
- Since CSS Version: 2
Example
The following code provides a demonstration of how you can select child elements.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body > * > span, tr > th {<!-- w w w .jav a 2 s. c o m-->
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<table id="mytable">
<tr>
<th>Name</th>
<th>City</th>
</tr>
<tr>
<td>XML</td>
<td>London</td>
</tr>
<tr>
<td>HTML</td>
<td>New York</td>
</tr>
<tr>
<td>CSS</td>
<td>Paris</td>
</tr>
</table>
<p>
This is a test.
</p>
<table id="othertable">
<tr>
<th>Name</th>
<th>City</th>
</tr>
<tr>
<td>Java</td>
<td>Boston</td>
</tr>
<tr>
<td>Javascript</td>
<td>Paris</td>
</tr>
<tr>
<td>SQL</td>
<td>Paris</td>
</tr>
</table>
</body>
</html>
The code above created a union of child selectors.
The first selects span elements that are children of any element
that is a child of the body element.
The second selects th elements that are children of tr elements.