CSS Selector element>element

The element>element selector adds styles for elements with a specific parent.

element1 > element2 is also called Child Selector

This selector matches an element based on its status as a child of another element. This is more restrictive than a descendant selector, since only a child will be matched.

Examples:

div > p  {color:  red;}
ul > li {font-weight: bold;}

Summary

CSS Version: 2

CSS Syntax

element>element { 
   style properties 
}

Browser compatibility


`element>element`	Yes	7.0	Yes	Yes	Yes

Example

An example showing how to use element>element CSS selector.

<!DOCTYPE html>
<html>
<head>
<style>
div>span<!--from w  w w.  j  ava2 s .  c  om-->
{
    background-color:yellow;
}
</style>
</head>
<body>
    <div>
        <h2>h2 inside div</h2>
        <span>span inside a div.</span>
    </div>
    
    <div>
       <p><span>span not directly inside a div.</span></p>
    </div>
    <span>span.</span>
</body>
</html>

Click to view the demo

Example 2

The following code shows how to use z-index and child selector.

<html>
<head>
<style type='text/css'>
div {<!--  w ww  . j  ava2s .c o  m-->
  position: absolute;
  padding: 10px;
  border: 1px solid black;
  background: red;
  width: 100px;
  height: 100px;
  top: 20px;
  left: 20px;
  z-index: 4;
}

div>div {
  background: lightblue;
  z-index: 3;
}

div>div>div {
  background: lightgreen;
  z-index: 2;
}

div>div>div>div {
  background: pink;
  z-index: 1;
}
</style>
</head>
<body>
  <div>
    <div>
      <div>
        <div></div>
      </div>
    </div>
  </div>
</body>
</html>

Click to view the demo

Example 3

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 {<!--from  w w w  .ja  va  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>

Click to view the demo

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.