Visit Mozilla.org

CSS:Child selectors

From MDC

« CSS « CSS Reference

[edit] Summary

The > combinator separates two selectors and matches an 2nd element only if it is a direct child of the 1st.

[edit] Syntax

selector1 > selector2 { style properties }


[edit] Examples

span { background-color: white; }
div > span {
  background-color: DodgerBlue;
}

...where...

<div>
  <span>Span 1. In the div.
    <span>Span 2. In the span that's in the div.</span>
  </span>
</div>
<span>Span 3. Not in a div at all</span>

... should look like ...

Span 1. In the div. Span 2. In the span that's in the div.
Span 3. Not in a div at all.

[edit] Notes