---
title: Los selectores descendientes
slug: Web/CSS/Descendant_combinator
translation_of: Web/CSS/Descendant_combinator
---
<p>{{ CSSRef() }}</p>
<h2 id="Summary" name="Summary">Sumario</h2>
<p>El <code>␣</code> combinador  <font><font>(que se supone que representan un espacio, o mejor dicho uno o más espacios en blanco) combina dos selectores tales que el selector combinado incluye sólo los elementos que coinciden con el segundo selector para los que hay un elemento ancestro que coincide con el primer selector.<span class="Apple-converted-space"> </span></font><font>Los selectores descendientes son similares a<span class="Apple-converted-space"> </span></font></font><a href="https://developer.mozilla.org/en/CSS/Child_selectors" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title="selectores es / CSS / Niños"><font><font>selectores hijos</font></font></a><font><font><span class="Apple-converted-space"> </span>, pero que no requieren que la relación entre los elementos coincidentes ser estrictamente entre padres e hijos.</font></font></p>
<h2 id="Syntax" name="Syntax">Sintaxis</h2>
<pre class="eval">selector1 selector2 { <em>propiedades de estilos</em> }
</pre>
<h2 id="Example" name="Example">Ejemplo</h2>
<pre class="brush: css">span { background-color: white; }
div span { background-color: DodgerBlue; }
</pre>
<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>{{ EmbedLiveSample('Example', '', '', '') }}</p>
<h2 id="Especificaciones"><span>Especificaciones</span></h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</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">Selector CSS Nivel 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="Compatibilidad_del_navegador" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.142857142857143rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font>Compatibilidad del navegador</font></font></h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Carracterística</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Soporte básico</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>Carracterística</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Mobile</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Soporte básico</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">Ver también</h2>