CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

CSS Descendant Selector


What is Descendant Selector?

Descendant Selector match all element that are descendants of specified element.
Descendant Selector identify by whitespace between two selector element.
Descendent Selector select specific element and that specific element match all descendants element.

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.

Syntax

This syntax apply to match all <p> element that are descendants of specified element.

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

Same as this syntax apply to match all element that are descendants of specified <div> element.

div * {
	property: value;
	property: value;
	...
}

Example:

Match all <p> element that are descendants of <div> to apply css.

<style type="text/css">
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>
</body>

Run it...   »

Example Result:

Example:

In this example selector div * matches all descendant element of specified <div> element.

<style type="text/css">
div * {
   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>
</body>

Run it...   »

Example Result:

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

<style type="text/css">
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>

Run it...   »

Example Result: