CSS Introduction | CSS Selectors | Combinators

Combinators

A CSS selector can include one or more selectors. Combinators define the relationship between related selectors.

Descendant Selector

A descendant selector selects all elements of a specific type among the descendant elements of the corresponding element.

The following example selects all <p> tags among the descendants of every <div> tag.

div p {style;}

As in the example above, a descendant selector must include one space between div and p.

<style>
    div p { background-color: #FFEFD5; }
</style>

Child Selector

A child selector selects all elements of a specific type among the direct child elements of the corresponding element.

The following example selects all <p> tags among the direct child elements of every <div> tag.

div > p {style;}
<style>
    div > p { background-color: #FFEFD5; }
</style>