¿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í:
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.
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
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.
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.
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.
Actualizado: jueves, 28 de septiembre de 2023