mozilla

Revision 393857 of Descendant selectors

  • Revision slug: Web/CSS/Descendant_selectors
  • Revision title: Descendant selectors
  • Revision id: 393857
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment CSS/Descendant_selectors Web/CSS/Descendant_selectors

Revision Content

{{ CSSRef() }}

Summary

The combinator (that's meant to represent a space, or more properly one or more whitespace characters) combines two selectors such that the combined selector matches only those elements matching the second selector for which there is an ancestor element matching the first selector. Descendant selectors are similar to child selectors, but they do not require that the relationship between matched elements be strictly parent-child.

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.

Specifications

Specification Status Comment
CSS Selectors Level 3 {{ Spec2('CSS3 Selectors') }}  
CSS 2.1 {{ Spec2('CSS2.1') }}  
CSS 1 {{ Spec2('CSS1') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <code>␣</code> combinator (that's meant to represent a space, or more properly one or more whitespace characters) combines two selectors such that the combined selector matches only those elements matching the second selector for which there is an ancestor element matching the first selector. Descendant selectors are similar to <a href="/en/CSS/Child_selectors" title="en/CSS/Child selectors">child selectors</a>, but they do not require that the relationship between matched elements be strictly parent-child.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="eval">selector1 selector2 { <em>style properties</em> }
</pre>
<h2 id="Examples" name="Examples">Examples</h2>
<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>
<h2 id="Specifications"><span>Specifications</span></h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a class="external" href="http://www.w3.org/TR/css3-selectors/#general-sibling-combinators" title="http://www.w3.org/TR/css3-selectors/#general-sibling-combinators">CSS Selectors Level 3</a></td>
      <td>{{ Spec2('CSS3 Selectors') }}</td>
      <td> </td>
    </tr>
    <tr>
      <td><a class="external" href="http://www.w3.org/TR/CSS21/selector.html#descendant-selectors" title="http://www.w3.org/TR/CSS21/selector.html#descendant-selectors">CSS 2.1</a></td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td> </td>
    </tr>
    <tr>
      <td><a class="external" href="http://www.w3.org/TR/CSS1/#contextual-selectors" title="http://www.w3.org/TR/CSS1/#contextual-selectors">CSS 1</a> </td>
      <td>{{ Spec2('CSS1') }}</td>
      <td> </td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
Revert to this revision