Selecting Descendant Elements

The descendant selector selects elements contained within another element, not just the immediate children.

The descendant selector has the following format:

 
<first selector> <second selector>

 
        <!DOCTYPE HTML> 
        <html> 
            <head> 
                <title>Example</title> 
                <style type="text/css"> 
                p span { 
                    border: thin black solid; 
                    padding: 4px; 
                } 
                </style> 
            </head> 
            <body> 
                <p>Java<span>HTML</span>CSS</p> 
            </body> 
        </html>

Click to view the demo

A more complex descendant selector example

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        #mytable td { 
            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> 
    </body> 
</html>

Click to view the demo

Home
HTML CSS Book
CSS

Selectors Combination: