") Child /> CSS Child Selector - Child vs Descendant selector

CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

CSS Child Selector


What is 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.

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 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>.

<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>
<p>This is outside another paragraph text</p>
</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: