CSS Child Selector - Child vs Descendant selector

What is CSS Child Selector?

CSS Child Selector matches all element that are child of specified element.
This selector relationship between two elements, and one element is child of another element.
This selector identify by greater than (">") sign surrounding by selector.

Syntax

This syntax apply to matches all <p> element that are child of specified <div> element.

div > p {
  property: value;
  property: value;
  ...
}

Example

Match all <p> element that are child of <div> element. Does not match other <p> element whose are not a child element of <div>.

<!DOCTYPE html>
<html>
<head>
  <title>CSS Child Selector</title>
  <style>
    div > p {
       font-size:24px;
    }
  </style>
</head>
<body>
  <div>
    <p>This is paragraph text</p>

    <h4>This is h4 heading text</h4>

    <p>This is another paragraph text</p>
  </div>

  <p>This is outside another paragraph text</p>
</body>
</html>

Run it...   »

Difference between Descendant and Child Selectors

Descendant selector is select child of child of so forth child element where else Child selector is only of that child of specific element.

Following example all <p> element whose are descendant of div element

Example

Select all element whose have child of an <ul> element.

<!DOCTYPE html>
<html>
<head>
  <title>CSS Descendant Selector</title>
  <style>
    div p {
       font-size:24px;
    }
  </style>
</head>
<body>
  <div>
    <p>Child Selector</p>
    <div>
        <p>Descendant Selector</p>
    </div>
    <h4>Child Selector</h4>
    <p>Child Selector</p>
  </div>
</body>
</html>

Run it...   »

Browser Compatibility

  • Google Chrome 2+
  • Mozilla Firefox 1+
  • Internet Explorer 8+
  • Opera 9.2+
  • Safari 1.3+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.