Editando Selector CSS (sección)

== Combinadores de selectores CSS ==

Los combinadores CSS son signos gráficos, o caracteres especiales, o palabras o expresiones reservadas utilizados en el nombre del selector para formar los selectores CSS complejos. Estos selectores CSS aumentan precisión del selector al relacionar varios de ellos en función de que cumplan alguna condición (que es la definida por el combinador).

=== Combinador CSS de descendiente: ' ' (espacio en blanco) o '>>' ===
En el documento sobre los selectores de nivel 4 se introduce el nuevo combinador <code>>></code> equivalente al espacio en blanco.

El espacio en blanco o el doble <code>>></code> separando el nombre de dos selectores CSS se utiliza para apuntar a elementos contenidos dentro de otro en el [[Document Object Model|DOM]] del documento. <code>a b {}</code> o <code>a >> b {}</code> selecciona a todos los elementos <code>b</code> contenidos (dentro) de <code>a</code> sin importar la profundidad o los descendientes interpuestos entre 'a' y 'b'.

=== Combinador CSS de hijo directo '>' ===
<code>a > b {}</code> Solo aplica a los elementos 'b' contenidos directamente en 'a' ('b' es hijo directo de 'a').

=== Combinador CSS de hermano posterior '~'===
<code>a ~ b {}</code> El signo '~' en el selector obliga a que 'b' sea hermano de 'a' (estén ambos contenidos directamente en el mismo elemento). No importa que en el html entre ambos haya otros elementos hermanos interpuestos.

<pre data-language='CSS & html'>
h2 ~ p {}

&lt;article>
  &lt;h2>título&lt;/h2>
  &lt;p>texto del primer párrafo&lt/p>
  &lt;img src='... />
  &lt;p>texto de otro párrafo&lt/p>
&lt;/article>
</pre>

El selector CSS del código previo <code>h2 ~ p {}</code> afecta por igual a los dos párrafos ya que ambos son hermanos posteriores del título (h2): están contenidos directamente en el mismo elemento html, ambos (el título y los párrafos) tienen al <code>article</code> como padre.

=== Combinador de hermano posterior adyacente '+' === 
<pre>a + b {}</pre> Representado por el signo '+' selecciona, al igual que el anterior, cada elemento 'b' que sea hermano de un 'a' y además estén adyacentes: 'b' tiene que aparecer en el DOM inmediatamente después de cerrar 'a', no puede haber ningún otro hermano que los separe o se interponga entre ellos.

En el bloque de código anterior si el combinador CSS en vez de ser el de hermano posterior <code>~</code> es el de hermano posterior adyacente <code>h2 + p {}</code> solo el primer párrafo (el que sigue al h2) se vería afectado por la regla CSS.

Observa que al referirme a los combinadores CSS de hermanos incluyó la expresión «hermano posterior» ya que CSS no puede (de momento) remontar el DOM. Esto es, siempre serán elementos 'contenidos en' o 'posteriores a'. Nunca al "contenedor de" o al "precedente de".

=== Combinador CSS de namespace '|' y qualified names ===
La barra vertical '|' se emplea para acotar el sujeto del selector al [[espacio de nombres]] ({{lang-en|namespace}}) indicado. La especificación tiene su documento (status W3c Recomendation) específico para este tema: [http://www.w3.org/TR/CSS3-namespace/ "CSS Namespaces Module"] y los "nombres CSS calificados".

<pre data-language='css'>
@namespace misitio "http://misitio.dominio.ext";

misitio|A
 <span>representa el nombre A en el namespace http://misitio.dominio.ext</span>
</pre>

Nota: La especificación no incluye en este apartado de los combinadores al de namespace.

=== Combinador CSS de referencia '/ref/' ===
A título informativo. El documento sobre los selectores de nivel 4 introduce este selector.
<pre data-language='css'>
label:matches(:hover, :focus) /for/ input {}
</pre>

[https://web.archive.org/web/20141224064625/http://dev.w3.org/csswg/selectors4/#idref-combinators "El combinador /ref/"] en el código anterior apunta al input al hacer :hover o :focus en su etiqueta (label). Lo vincula por el atributo 'for'.

=== Combinador CSS /deep/ para iluminar las sombras ===

[https://esCSS.blogspot.com/2014/10/deep-selector-CSS.html "El combinador /deep/"] es de reciente{{cuándo}} formulación. Concebido para poder apuntar a los elementos creados o incluidos en el ''[[shadow DOM]]''.

'''Nota:''' Chrome retiró recientemente{{cuándo}} el soporte a este combinador.

=== Combinador de columna || ===

El combinador de columnas <code>||</code> (representado por dos barras verticales), nuevo en el doc Selectores de nivel 4, selecciona las celdas pertenecientes a una columna dada. En caso de que una celda ocupase 2 o más columnas diferentes se verá afectado por cualquiera de estas.

<pre data-language='Html & CSS'>
col.selected || td {
  background: gray;
  color: white;
  font-weight: bold;
}

&lt;table>
  &lt;col span="2">
  &lt;col class="selected">
  &lt;tr>&lt;td>A &lt;td>B &lt;td>C
  &lt;tr>&lt;td colspan="2">D &lt;td>E
  &lt;tr>&lt;td>F &lt;td colspan="2">G
&lt;/table>
</pre> 

El selector <code>col.selected || td</code> afecta a las celdas C, E, y G.