Cómo usar los selectores de hermano en CSS3

A mi parecer, los selectores de hermanos de CSS3 están poco valorados ya que estos pueden ser una herramienta bastante útil a la hora de crear ciertos componentes con CSS, aunque también presentan un inconveniente clave: no se pueden seleccionar elementos anteriores en el DOM. El funcionamiento básico está descrito en muchos sitios, así que en este post me enfocaré en mostrar un par de utilidades que van más allá de seleccionar el p que va después del h1.

Selectores en CSS3

En CSS3 existen 2 selectores de hermano:

• Adyacente "+": Selecciona al hermano adyacente, es decir, al que viene justo después en el DOM.
  
• General "~": Selecciona a todos los hermanos que están después del elemento en el DOM.
  

Lista de elementos

Estamos haciendo una lista de elementos, y queremos que entre un elemento y otro exista un borde, un espacio, algo que separe los elementos. Se puede aplicar un border-top a todos los elementos, pero ese borde también le tendría el primer elemento, cosa que no queremos. En su lugar, aplicamos el border-top a los hermanos adyacentes de li:

Código :

li + li {
  border-top: 3px solid #ddd;
}

Este código selecciona a todos los li que estén precedidos de otro li. Como el primer li no tiene a ninguno otro detrás, no le aplica el estilo.

Ver el ejemplo completo

Lista de elementos con hover

Tomemos el mismo ejemplo anterior y añadamos un efecto hover a los li. Al pasar con el ratón por encima aparecerá un borde por debajo del elemento. Pero ese borde desplaza todo el menú hacia abajo y además deja demasiado espacio entre un elemento y otro, así que a la vez que ponemos el borde inferior al elemento con hover, quitamos el borde del elemento adyacente, de la siguiente forma:

Código :

li:hover {
  border-bottom: 4px solid #777;
}
li:hover + li {
  border-top: none;
}

Ver el ejemplo completo

Personalizar un campo de texto

Necesitamos crear unos estilos para los campos de texto de una web. Algunos de los inputs tendrán un icono a la izquierda, otros tendrán un botón a la derecha, y otros tendrán ambos.

Empecemos creando un campo de texto básico.

Código :

<div class="form-input">
  <input id="pony" type="text" class="input" placeholder="Introduce un nombre"/>
</div>

Código :

.form-input {
  position: relative;
}
.form-input .input {
  padding: .4em .7em;
  width: 100%;
}

Con esto tenemos un campo de texto simple, personalizado con nuestros estilos. Pero dije que los campos de texto podrían tener un icono y un botón. Estos elementos serán opcionales, por lo que tendremos que tener eso en cuenta más adelante. Este sería el HTML con todos los elementos. Nótese que el icono y el botón se ponen antes del input.

Código :

<div class="form-input">
  <label for="pony"></label>
  <button></button>
  <input id="pony" type="text" placeholder="Introduce un nombre para el pony"/>
</div>

Y los estilos de icono y del botón:

Código :

.form-input label{
  left: 0;
  margin: .5em;
  position: absolute;
  top: 0;
}
.form-input button {
  margin: .5em;
  position: absolute;
  top: 0;
  right: 0;
}

El icono y el botón se posicionan de forma absoluta dentro de la caja que contiene todos los elementos(.form-input). Si miramos el ejemplo en este punto, veremos que está casi perfecto. El problema es que el texto del input queda por debajo del input y del botón. Para solucionar esto aplicaremos el selector general de hermanos de la siguiente forma:

Código :

.form-input label ~ input {
  padding-left: 2em;
}
.form-input button ~ input {
  padding-right: 2em;
}

Mediante el selector seleccionamos al input que sea hermano del ícono y del botón, y le añadimos un padding para evitar que el texto quede por debajo de estos elementos. Esta selección solo funcionará si el ícono o el botón se insertan junto al input. Si no ponemos ni icono ni botón, al no existir los elementos no se aplicará el padding al input.

Ver el ejemplo completo

Estos son un par de ejemplos para que vean la utilidad de este tipo de selectores. Generalmente no hay una sola forma de hacer las cosas, por lo que cada uno puede usar la que prefiera, pero creo que siempre viene bien conocer opciones y ver cómo trabajan otras personas.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.