mozilla

Revision 9076 of Descendant selectors

  • Revision slug: CSS/Descendant_selectors
  • Revision title: Descendant selectors
  • Revision id: 9076
  • Created:
  • Creator: Miken32
  • Is current revision? No
  • Comment no wording changes

Revision Content

{{ CSSRef() }}

Summary

The combinator (that's meant to represent a space) separates two selectors and matches the 2nd element if it is a descendant of the 1st. It is similar to the child selectors element, but doesn't require that the descendant be a direct child of the parent.

Syntax

selector1 selector2 { style properties }

Examples

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

...where...

<div>
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>
<span>Span 3.</span>

... should look like ...

Span 1. Span 2.
Span 3.

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>␣</code> combinator (that's meant to represent a space) separates two selectors and matches the 2nd element if it is a descendant of the 1st. It is similar to the <a href="/en/CSS/Child_selectors" title="en/CSS/Child_selectors">child selectors</a> element, but doesn't require that the descendant be a direct child of the parent.</p>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">selector1 selector2 { <em>style properties</em> }
</pre>
<h3 name="Examples">Examples</h3>
<pre class="brush: css">span { background-color: white; }
div span { background-color: DodgerBlue; }
</pre>
<p>...where...</p>
<pre class="brush: html">&lt;div&gt;
  &lt;span&gt;Span 1.
    &lt;span&gt;Span 2.&lt;/span&gt;
  &lt;/span&gt;
&lt;/div&gt;
&lt;span&gt;Span 3.&lt;/span&gt;
</pre>
<p>... should look like ... </p>
<p><span style="background-color: DodgerBlue;">Span 1.</span> <span style="background-color: DodgerBlue;">Span 2.</span><br>
<span>Span 3.</span></p>
<h3 name="Notes">Notes</h3>

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