CSS reference manual

CSS @rules

CSS attribute大全

CSS Functions (Functions)Comprehensive Manual of CSS Selectors

CSS > Child Selector

When using the 　> selector to separate two elements, it will only match those second elements that are direct descendants (children) of the first element. In contrast, when two elements are connected by the descendant selector, it represents matching all second elements that exist as descendants (but not necessarily parents) of the first element, regardless of how many times it "jumps" in the DOM.

Complete CSS Selector Reference Manual

Online Example

Select all <p> elements that are children of <div> elements:

Example

<!DOCTYPE html>
<html>
<title>Basic Tutorial Website (oldtoolbag.com)</span>/title>
<head>
<style>
div>p
{
background-color: red;
color: white;
}
div > span {background-color: DodgerBlue;}
</style>
</head>
<body>
<h1>Welcome to Basic Tutorial Website (www.oldtoolbag.com)</span>/h1>
<div>
<p>The URL of our website is: www.oldtoolbag.com./p>
<p>The name of our website is: Basic Tutorial Website.</p>/p>
<span>Demonstrate child selector</span>/span>
</div>
<p>We provide various basic tutorials for you to learn. Learn the basics well, and you can go further! </p>/p>
</body>
</html>

Test and see ‹/›

Definition and usage

element1　>　element2　{Style declaration　}

element>element Child selector is used to select a specific parent element.

Note: You cannot directly specify the child element of the parent element if the element is not selected.

Browser compatibility

IEFirefoxOperaChromeSafari

All mainstream browsers support element>element Child selector.

Note:element>elementIE8Must be declared when running in <!DOCTYPE>

Complete CSS Selector Reference Manual

CSS Functions (Functions)Comprehensive Manual of CSS Selectors