Child selectors

  • Revision slug: CSS/Child_selectors
  • Revision title: Child selectors
  • Revision id: 9124
  • Created:
  • Creator: Miken32
  • Is current revision? No
  • Comment 3 words added, 3 words removed

Revision Content

{{ CSSRef() }}

Summary

The > combinator separates two selectors and matches the second element only if it is a direct child of the first.

Syntax

selector1 > selector2 { style properties }

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.

Notes

{{ languages( { "fr": "fr/CSS/:first-child", "pl": "pl/CSS/:first-child" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>The <code>&gt;</code> combinator separates two selectors and matches the second element only if it is a direct child of the first.</p>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">selector1 &gt; selector2 { <em>style properties</em> }
</pre>
<h3 name="Examples">Examples</h3>
<pre class="brush: css">span { background-color: white; }
div &gt; span {
  background-color: DodgerBlue;
}
</pre>
<p>...where...</p>
<pre class="brush: html">&lt;div&gt;
  &lt;span&gt;Span 1. In the div.
    &lt;span&gt;Span 2. In the span that's in the div.&lt;/span&gt;
  &lt;/span&gt;
&lt;/div&gt;
&lt;span&gt;Span 3. Not in a div at all&lt;/span&gt;
</pre>
<p>... should look like ... </p>
<p><span style="background-color: DodgerBlue;">Span 1. In the div.</span> <span>Span 2. In the span that's in the div.</span><br>
<span>Span 3. Not in a div at all.</span></p>
<h3 name="Notes">Notes</h3>

<p>{{ languages( { "fr": "fr/CSS/:first-child", "pl": "pl/CSS/:first-child" } ) }}</p>
Revert to this revision