CSS Child combinator (>) Selector

Description

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:

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

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.

Syntax

element>element {
    css declarations;
}

Example

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.

Desktop
Yes	Yes	Yes	Yes	Yes

Tablets / Mobile
Yes	Yes	Yes	Yes	Yes	Yes