Selecting Child Elements

The child selector matches elements that are directly contained in matched elements. The child selector has the following syntax:

 
<first selector> > <second selector>
  
 
        <!DOCTYPE HTML> 
        <html> 
            <head> 
                <title>Example</title> 
                <style type="text/css"> 
                body > * > span, tr > th { 
                    border: thin black solid; 
                    padding: 4px; 
                } 
                </style> 
            </head> 
            <body> 
                <table id="mytable"> 
                    <tr><th>Name</th><th>Value</th></tr> 
                    <tr><td>A</td><td>a</td></tr> 
                    <tr><td>B</td><td>b</td></tr> 
                    <tr><td>C</td><td>c</td></tr> 
                </table> 
                <span>HTML</span>
                <table> 
                    <tr><th>Name</th><th>Value</th></tr> 
                    <tr><td>A</td><td>a</td></tr> 
                    <tr><td>B</td><td>b</td></tr> 
                    <tr><td>C</td><td>c</td></tr> 
                </table> 
            </body> 
        </html>
  
Click to view the demo
Home 
  HTML CSS Book 
    CSS  

Selectors Combination:
  1. Selector Unions
  2. Selecting Descendant Elements
  3. Selecting Child Elements
  4. Immediate Sibling Selector
  5. General Sibling Selector
Related: