CSS Child combinator (>) Selector


The CSS child combinator selector (>) selects all elements that are the direct children of a specified element. It is represented by the greater than symbol (>) placed between two CSS selectors.

For example, the following selector will select all <p> elements that are the direct children of <div> elements:

div > p {
  color: red;

This will result in all <p> elements inside <div> elements being turned red.

The child combinator selector is more specific than the descendant selector, which selects all elements that are descendants of a specified element, regardless of how deep they are in the DOM tree.

Here is an example of the difference between the child combinator selector and the descendant selector:

  <p>This is a paragraph.</p>
    <li>This is a list item.</li>

div > p {
  color: red;

div p {
  color: blue;

The first CSS selector will only turn the first <p> element red, because it is the only direct child of the <div> element. The second CSS selector will turn both <p> elements blue, because they are both descendants of the <div> element.

The child combinator selector is a powerful tool for styling specific elements in your HTML document. It can be used to create complex and sophisticated designs.


element>element {
    css declarations;


div>p {
   color: #3366ff;
   background: #ffff99;

Give it a Try

Click the button below to experiment with this selector.

Give it a Try!

Browser Support

The following table will show you the current browser support for the CSS child combinator selector.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview