Los selectores combinadores descendientes en CSS3

No quiero asustaros pero la vamos a liar parda en esta clase. Lo de aprender que son selectores de etiqueta, de clase y de id ya se quedan en pañales. Lo digo, porque ahora si que vamos a empezar a profundiza más en el tema de los selectores en CSS3.

Para poder entender estos selectores, debemos hacer un repaso acerca de como se organiza un documento html. Tienes que tener claro como se estructura, que elementos son los padres, los hijos, los hermanos y los ancestros. Os avisé, aquí es cuando tenemos que apretar un poco y ponernos serios. Pero os aseguro que si yo lo he entendido, vosotros podéis entenderlos mejor todavía. Ya habéis visto el cambio que ha dado el blog, los que me estáis siguiendo desde el inicio.

Me he buscado un esquema en Google, al que le he añadido una leyenda para que, ademas de entender como va el tema de los selectores combinadores descendientes, podáis guardaros la imagen como chuleta de todo esto. Ampliad la imágen para verlo correctamente y veréis que sencillo os resulta cuando lo veáis.

Aclarado esto, vamos a empezar a ver los selectores combinadores. El primer selector, es el selector combinador descendiente. Si! queridos amigos/as, existen mas selectores combinadores en el maravilloso mundo de CSS3. Pero vamos por partes, en esta clase vamos a estudiar solo los selectores combinadores descendientes.

Con este selector, estamos definiendo una regla en donde se está seleccionando aquellas etiquetas <em>, que se encuentran dentro de una etiqueta <h1>. El espacio en blanco entre los dos selectores, indica que el selector que se encuentra a la izquierda <h1>, es un ancestro de <em>. No importa lo profunda que se encuentre la etiqueta <em>, siempre y cuando esté dentro de la etiqueta <h1>, siempre se le aplicará este estilo.

La practica hace al maestro, así que vamos ha hacer unos ejercicios prácticos, ya veréis que divertido. Estad atento al siguiente código HTML y des pues del código HTML está el ejercicio.

<!-- HTML -->

<h1>Bienvenidos <em>a mi sitio web<em></h1>

 <section>
  <div>
  <p><em>Soy em</em> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae fugit, enim voluptas repellendus consequatur dolor molestias reiciendis esse explicabo, alias ipsum magnam officiis, quis adipisci, sapiente nihil molestiae nemo cupiditate.</p>
  </div>
 </section>
  
 <section>
  <p><em>Soy em</em> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae fugit, enim voluptas repellendus consequatur dolor molestias reiciendis esse explicabo, alias ipsum magnam officiis, quis adipisci, sapiente nihil molestiae nemo cupiditate.</p>
 </section>
  
 <p><em>Soy em</em> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis ea recusandae similique dignissimos iure magnam tempora voluptatibus deserunt at culpa, minima, sapiente. Quaerat cum aliquid ullam laborum incidunt non cumque.</p> 

Ejercicio practico 1:

¿Como seleccionaríamos una etiqueta que está dentro de otra? Tenemos que seleccionar aquellas etiquetas <em> que se encuentran únicamente dentro de una etiqueta <h1>.

/* CSS */

h1 em { background: green; }

Ejercicio practico 2:

Usando el código HTML que hemos utilizado más arriba para el primer ejercicio practico con los selectores combinadores descendientes, realiza este ejercicio.

¿Como seleccionarías, solo aquellas etiquetas <em> que se encuentren dentro de una etiqueta <p> y a la vez, esta etiqueta <p> se encuentre dentro de una etiqueta <div>, y esta etiqueta <div> se encuentre dentro de una etiqueta <section>?

/* CSS */

section div p em { background: green; }

Finalizando la clase

Pues ya habéis visto que no nos ha estallado la cabeza ni nada de eso. Poco a poco, vamos insertando información en nuestro cerebro que vamos archivando y así llegar a nuestro objetivo que no es más que, aprender a crear páginas web desde cero con HTML5 y CSS 3. Por favor comparte este post en tu red social favorita, así me ayudas a llegar a más personas y que este blog crezca y más personas se beneficien de esta información.

¡HASTA LA PROXIMA CLASE!