Qué son esos símbolos CSS3 ‘+’, ‘>’ y ‘~’ en las hojas de estilo

Qué son esos símbolos CSS3 ‘+’, ‘>’ y ‘~’ en las hojas de estilo

¿Has escuchado hablar sobre los símbolos CSS3? Si trabajas en front end seguro sí has escuchado hablar de las hojas de estilo.

Las hojas de estilo son cada vez más poderosas al punto que acciones que antes requerían muchas líneas de código de JavaScript, ahora es posible realizarlas con un par de selectores y parámetros de CSS.

Pero este poder viene con un precio, a CSS se le han estado agregando varios elementos que pueden ser un poco complejos de entender.

Como especialistas en diseño de páginas web, en este artículo hablaremos de qué son los símbolos css3 ‘+’, ‘>’ y ‘~’ que aparecen en las hojas de estilo recientes.

Principales símbolos CSS3

El código inicial

Empecemos con un poco de código HTML al cual le agregaremos hojas de estilo:

<div class=”contenedor”>
<h3>Título de mi página</h3>
<div>
<p>Primer párrafo</p>
</div>
<p>Segundo párrafo</p>
<p>Tercer párrafo</p>

Que se vería así:

Qué son esos símbolos CSS3 ‘+’, ‘>’ y ‘~’ en las hojas de estilo

Espacio

.contenedor p { color: #0000ff; }

Se le conoce como el selector descendiente y en este ejemplo está diciendo

Todos los párrafos dentro del selector .contenedor

Tomando nuestro ejemplo, este cambio haría que los tres párrafos cambien el color de letra a azul.

Qué son esos símbolos CSS3 ‘+’, ‘>’ y ‘~’ en las hojas de estilo

El símbolo > (mayor que)

.contenedor > p { color: #0000ff; }

El símbolo > en css se puede interpretar como

Todos los elementos que son hijos directos de .contenedor

En nuestro caso, serían afectados los párrafos dos y tres. El párrafo “Primer párrafo” no sería afectado ya que no es un hijo directo de .contenedor. Esto se da al estar dentro de un div

Qué son esos símbolos CSS3 ‘+’, ‘>’ y ‘~’ en las hojas de estilo

El símbolo +

Se denomina el hermano adjunto.

Tomemos como ejemplo el siguiente código css

div + p { color: #ff0000; }

Lo que hace el navegador entonces es buscar un párrafo (p) que esté inmediatamente después de un div. En nuestro caso, el único párrafo que cumple este requisito es el párrafo dos.

Qué son esos símbolos CSS3 ‘+’, ‘>’ y ‘~’ en las hojas de estilo

El símbolo ~

Este símbolo en css funciona muy parecido a + con la diferencia que selecciona el ítem que esté inmediatamente después y todos los siguientes.

Por ejemplo, con el siguientes css

div ~ p { color: #ff0000; }

Seleccionaría el segundo párrafo ya que viene después de un div, y también el tercer párrafo, ya que estamos seleccionando los p siguientes.

Qué son esos símbolos CSS3 ‘+’, ‘>’ y ‘~’ en las hojas de estilo

Hacks

Supongamos que tenemos el siguiente código HTML

<label for="controlador">Haz clic en el checkbox</label> <input id="controlador" type="checkbox" /> <ul> <li>Item 1</li> <li>Item 2</li> </ul>

Si agregamos el siguiente código CSS

input + ul { display: none; } input:checked + ul { display: block; }

Tenemos que podemos controlar la visibilidad de la lista con un checkbox sin necesidad de JavaScript.

Qué son esos símbolos CSS3 ‘+’, ‘>’ y ‘~’ en las hojas de estilo

Actualizado: jueves, 28 de septiembre de 2023

Juan Esteban Yepes