CSS Child Combinator

Last Updated Jul 21, 2015, 12:00:06 PM





CSS Child Combinator

CSS child combinator targets HTMLelements that are direct children of other elements

The greater than sign is referred to as a child combinator. And selectors that use child combinators are called child selectors, because they target elements that are direct children of other elements. Now, direct children are those elements that are directly nested inside a parent element.

This is the same code from the descendant combinator example, but instead of a space character, we`re using the greater-than symbol

Example

In this example, the selector will match all elements that have a class of box and that are immediate children of the #myContainer element. That means, unlike the descendant combinator, there can`t be another element wrapping .box—it has to be a direct child element.

The CSS code for this looks like:



After applying the css to the above html, it will produce the following result

Output
CSS Child Combinator
Try It Now

CSS Selectors Reference

CSS Selectors Reference

CSS Combinators

Other CSS Selectors you might want to learn

CSS Id Selector

CSS Class Selector

CSS Group Selector

CSS Child Combinator

CSS General Combinator

CSS Adjacent Combinator



Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

Last Updated Jul 21, 2015, 12:00:06 PM