CSS Selector - How to use CSS nested element Selector

The element element is called nest selector or Descendant Selector. It selects elements inside elements.

We can use Descendant Selector to select an element based on its status as a descendant of another element.

The matched element can be a child, grandchild, great-grandchild, etc., of the ancestor element.

Examples:

body  h1  {font-size: 100%;}
table tr td div  ul li {color: red;}

Summary

CSS Version: 1

CSS Syntax

element element { 
   style properties 
}

Browser compatibility


`element element`	Yes	Yes	Yes	Yes	Yes

Example

An example showing how to use element element CSS selector.

<!DOCTYPE html>
<html>
<head>
<style>
div p<!--from  ww w  .j a  v  a 2  s  . co m-->
{
   background-color:red;
}
</style>
</head>
<body>
<div>
    <h2>h2 inside div</h2>
    <p>paragraph inside div</p>
</div>
<p>paragraph outside div</p>

</body>
</html>

Click to view the demo

Example 2

A another Descendant Selector Example

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#mytable td {<!--   w  ww .j a  v a 2s . 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>CSS3</td>
      <td>Paris</td>
    </tr>
    <tr>
      <td>HTML5</td>
      <td>Paris</td>
    </tr>
  </table>
</body>
</html>

Click to view the demo

The code above defined two simple tables, each of which defines the id attribute. The ID selector selects the table with the id value of mytable and then selects the td elements that it contains.

It is not selecting direct descendants. It skips the tr elements to select the td elements.

Example 3

The following code shows how to combine class selectors and nest element selectors.

<html>
<head>
<style type='text/css'>
body {<!--from ww  w .java2  s . c o m-->
  font-face: sans-serif;
}

h1 {
  margin: 5px;
}

p {
  border: 1px solid rgb(200, 200, 200);
  background: rgb(234, 234, 234);
  padding: 5px;
  margin: 5px;
}

p.note {
  background: yellow;
  border: 1px solid gold;
}

span.code {
  font-family: monospace;
  padding: 0 10px;
}

p span.code {
  background: yellow;
}

p.note span.code {
  background: lightyellow;
}
</style>
</head>
<body>
  <p>
    Descendant selectors apply styles based on ancestral relationships. <span
      class='code'>&lt;span&gt;</span> element named <em>code</em>, which
    is a descendant of <span class='code'>&lt;p&gt;</span> elements. To do
    this, the selector <span class='code'>p span.code</span> is used.
  </p>
  <p class='note'>
    The note text is given different styles. To do this another descendant
    selector is used. This time the selector is <span class='code'>p.note
      span.code</span>
  </p>
</body>
</html>

Click to view the demo