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