CSS, Selectores Avanzados

abril 4, 2014

Por gPuon

Además de los selectores básicos de los Cascading Style Sheets (Hojas de estilo o CSS para los cuates) que todo diseñador web conoce existen otros selectores avanzados menos conocidos que nos simplifican la vida y nos ayudan a mantener hojas de estilo más limpias. Vamos a conocer dos de ellos:

Selector de hijos

Se utiliza para seleccionar únicamente a los hijos directos de un elemento.

La regla CSS sería:

section > h1 { font-size:72px; color:#FC0; }

Su aplicación en el HTML:

<section>
   <h1>Soy hijo directo de section</h1>
   <article>
      <h1>Yo no soy hijo directo de section</h1>
   </article>
</section>

Selector adyacente

Se utiliza para seleccionar el elemento a continuación del indicado en la regla.

La sintaxis para el CSS queda así:

h1 + p { color:#666; }

Su aplicación en el HTML sería la siguiente:

<h1>Selector Adyacente</h1>
<p>Yo soy el párrafo adyacente de h1</p>
<p>Yo no soy el párrafo adyacente de h1</p>

Conclusión

La aplicación de estos selectores avanzados en nuestras hojas de estilo son una gran ventaja que además de ayudarnos a minimizar las líneas de código, nos permitirán con mucha creatividad y paciencia crear sitios más atractivos y funcionales.

Si tienen dudas o les gustaría saber más de estos selectores avanzados, comenten y las voy resolviendo. Gracias por ayudarme a compartir el contenido.