Combinator Selectors

Combinators express the relationship between two selectors. CSS provides four combinators that let you target elements based on their position in the HTML tree.

Descendant Combinator (space)

A B selects every B that is a descendant of A, regardless of nesting depth.

Child Combinator (>)

A > B selects B only when it is a direct child of A.

Adjacent Sibling Combinator (+)

A + B selects the first B that immediately follows A at the same level.

General Sibling Combinator (~)

A ~ B selects all B elements that follow A as siblings.

Example

/* Descendant — any <a> inside .nav */
.nav a {
    text-decoration: none;
    color: #fff;
}

/* Child — only direct <li> children of <ul> */
ul > li {
    list-style: square;
    padding-left: 8px;
}

/* Adjacent sibling — <p> right after an <h2> */
h2 + p {
    margin-top: 0;
    font-size: 1.05rem;
    color: #555;
}

/* General sibling — all <p> after a .intro */
.intro ~ p {
    border-left: 3px solid #e0e0e0;
    padding-left: 12px;
}

CSS

Full Editor

Pro Tip

Use the child combinator (>) instead of the descendant combinator when you want to avoid accidentally styling deeply nested elements you did not intend to target.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned