Selectores Combinados

Los selectores combinados estan compuestos de, al menos, dos selectores unidos por un combinador intermedio.

Los combinadores son secuencias de caracteres que expresan una relación entre los selectores a cualquiera de sus lados. Al usar un combinador se crea lo que se conoce como un Selector complejo. En algunos casos, estos pueden ser la manera más concisa de definir estilos.

Debemos estar familiarizados con estos combinadores:

Combinador de descendencia Carácter de espacio en blanco
Combinador de hijo >
Combinador de hermanos adyacentes +
Combinador general de hermanos ~

Utilizaremos el siguiente trozo de HTML, un simple formulario, para observar el efecto de los ejemplos que iremos viendo:

<form method="GET" action="/processor">
  <h1>Compra de Camisetas</h1>
  <p>Cada camiseta cuesta 12€. Con dibujo incluído llevan un extra de 3€. Todos los campos son obligatorios.</p>
  <fieldset>
    <legend>Camisetas y dibujos</legend>
    <p>
      <label for="cantidad">Número de camisetas</label>
      <span class="ayuda">Máximo 10</span>
      <input type="number" value="1" name="cantidad" id="cantidad" step="1" min="1" max="8">
    </p>
    <p>
      <label for="cantidad">Dibujos</label>
      <span class="ayuda">Mínimo 2</span>
      <input type="number" value="1" name="cantidad"
 id="cantidad" step="1" min="1" max="8">
    </p>
  </fieldset>
  <fieldset>
    <legend>Pago</legend>
    <p>
      <label for="ccn">Nº de tarjeta de crédito</label>
      <span class="ayuda">Sin espacios ni guiones, por favor.</span>
      <input type="text" id="ccn" name="ccn" placeholder=
"492500000000008" maxlength="16" size="16">
    </p>
    <p>
      <label for="expiracion">Fecha de caducidad</label>
      <span class="ayuda"><abbr title="Mes con 2 dígitos">MM </abbr>/<abbr title="Año con 4 dígitos">MM</abbr>YYYY</span>
      <input type="text" id="expiracion" name="expiracion"
placeholder="09/2023" maxlength="7" size="7">
    </p>
  </fieldset>
  <fieldset>
    <legend>Dirección de Facturación</legend>
    <p>
      <label for="nombre">Nombre</label>
      <input type="text" id="nombre" name="nombre" placeholder=
"ej: Ramón Fernández García" size="40">
    </p>
    <p>
      <label for="calle">Calle</label>
      <input type="text" id="calle" name="calle" placeholder=
"ej: Ramón y Cajal, 27" size="40">
    </p>
    <p>
      <label for="ciudad">Ciudad</label>
      <input type="text" id="ciudad" name="ciudad" placeholder=
"ej: Lugo">
    </p>
    <p>
      <label for="region">Región</label>
      <input type="text" id="region" name="region" placeholder=
"Galicia" maxlength="12" size="12">
    </p>
    <p>
      <label for="cp">C.P.</label>
      <input type="text" id="cp" name="cp" placeholder=
"34165" maxlength="5" pattern="0-9{5}" size="5">
    </p>
  </fieldset>
  <button type="submit">¡COMPRAR!</button>
</form>

Sin aplicar ningún estilo, se vería en el explorador de la siguiente manera:

Combinador de descendencia

Probablemente ya estés familiarizado con el combinador de descendencia, ya que existe desde los primeros días de CSS (aunque no se especificó hasta CSS2.1). Está sobradamente utilizado y soportado por casi todos los navegadores.

El combinador de descendencia es simplemente un espacio en blanco, que separa el selector ancestro del descenciente, siguiendo el patrón A B, donde B es un elemento contenido en el elemento A.

Vamos a añadir el siguiente código al ejemplo anterior para ver como funciona:

form h1 {
    color: #FF0004;
}

El resultado sería:

Añadamos un poco más de CSS, esta vez para aumentar el tamaño del mensaje sobre los precios ("Cada camiseta cuesta 12€"):

form p {
font-size: 22px;
}

Como verás a continuación, hay un problema con el selector, ya que con él hemos incrementado el tamaño del texto en todos los párrafos del formulario, lo que no era nuestro objetivo.

Para arreglar el error introduciremos el combinador de hijo directo.

Combinador de hijo directo

A diferencia del combinador de descendencia, el combinador de hijo (>) selecciona solamente los hijos de un elemento. Sigue el patrón A>B , donde B es hijo directo del elemento A.

Para entenderlo facilmente, si los elementos fueran personas, el combinador de hijo solo seleccionaría a los hijos, mientras el combinador de descendencia seleccionaría también a nietos, biznietos, tataranietos, etc...

Modifiquemos el ejemplo previo a:

form > p {
font-size: 22px;
}

y veamos el resultado:

Como verás, solo el primer párrafo, hijo directo del elemento form, es afectado, ya que los demás párrafos serían "nietos" , aprovechando el símil anterior.

Combinador de hermanos adyacentes

Con el combinador de hermanos adyacentes (+), podemos seleccionar elementos que siguen a otro que tenga el mismo padre.

Utiliza el patrón A+B. Los estilos se aplicarán a aquellos elementos B inmediatamente precedidos por elementos A.

Volvamos al ejemplo y observemos que las etiquetas label e input siempre aparecen una detrás de otra. Por tanto, podemos utilizaqr el combinador de hermanos adyacentes para hacer que aparezcan en líneas separadas:


label + input {
display: block;
clear: both;
}

Veamos el resultado:

Veamos otro ejemplo que combina el selector universal (*) con un selector de tipo:

* + fieldset {
    margin: 5em 0;
}

En este ejemplo añadimos un margen de 5em en el top (arriba) y el bottom (abajo) de cada elemento fieldset. Usando de esta manera el selector universal, no tenemos que preocuparnos de qué elemento precede a cada elemento fieldset.

El resultado:

Pongámonos ahora en la texitura en la que queramos cambiar el estilo de un elemento "hermano" que no está "pegado" a su predecesor, como en nuestro ejemplo el input para "Número de camisetas". En tal caso, utilizaremos el Combinador general de hermanos.

Combinador general de hermanos

Con el combinador general de hermanos (~), podemos seleccionar elementos que comparten el mismo padre sin considerar si son adyacentes o no. Tomando el patrón A~b, se seleccionarían todos los elementos B que estuvieran precedidos por un elemento A, fueran o no adyacentes.

Veamos el marcado para nuestro elemento input del "Número de camisetas":

<p>
      <label for="cantidad">Número de camisetas</label>
      <span class="ayuda">Máximo 10</span>
      <input type="number" value="1" name="cantidad" id="cantidad" step="1" min="1" max="8">
</p>

Nuestro elemento input aparece después del elemento label, pero entre los dos hay un elemento span. El hecho de que el elemento span esté entre los dos, hace que el combinador de hermanos adyacentes no funcione en este caso.

Cambiemos nuestro ejemplo de combinador de hermanos adyacentes anterior por el combinador general de hermanos, tal que:

label ~ input {
    display: block;
}

Ahora todos nuestros elementos input se mostrarán en una línea separada de sus correspondientes elementos label, tal como vemos a continuación:

El uso del combinador general de hermanos puede ser más más útil cuando se carece de control total sobre el marcado. De lo contrario, sería mejor ajustar el marcado para añadir un nombre de clase, ya que el combinador general de hermanos puede crear algunos "efectos secundarios" en sitios con código css grande; así que mejor usarlo con cuidado.

Comentarios 0

Añadir comentario





Vista previa

(anonymous) escribió::
25 de mayo del 2019, a las 12:22


Añadir un nuevo comentario:


Vista previa