Selectores descendentes CSS

Vamos a cambiar, de donas a zanahorias, una de las comidas más saludables del mundo.

Además de que es la comida favorita de los conejos.

¿Sabías que las zanahorias no sólo son de color naranja?

Originalmente eran moradas. Hay algunas moradas todavía.

Tenemos aquí una pequeña página web con una lista de colores y un enunciado sobre su origen morado.

Y hemos usado clases para estilizar los nombres de los colores con el color correspondiente.

Me gusta cómo se ve el estilo en la lista, pero no estoy segura de que el "estilo morado" se vea bien en el texto.

Creo que es mejor quitar el color de fondo, y usar un color más sutil allí.

¿Cómo puedo decirle al navegador que estilice el texto en morado que está aquí de manera diferente que lo hace en este texto morado?

Bueno, tienen el mismo nombre de clase, así que no podemos usar el nombre de clase a menos que introduzcamos un nuevo nombre de clase.

También tienen el mismo nombre de etiqueta, los dos son "´s"

Así que no podemos usar el selector de elemento más nombre de clase que acabamos de aprender.

¿Hay algo más que sea diferente entre ellos?

Bueno, una cosa diferente es que esta etiqueta "" está dentro de esta etiqueta "",

y esta etiqueta "" está dentro de "".

Así que la diferencia son sus etiquetas padres, las etiquetas que están sobre ellas.

Podemos usar esa información para hacer una regla de CSS, usando lo que llamamos "selector descendente",

es una manera de seleccionar elementos basada en la posición que tienen en el documento.

Por ejemplo, para seleccionar solamente "purple" de la etiqueta "" dentro del párrafo,

debemos escribir "p" y luego un espacio, el espacio es muy importante,

y luego el nombre de la clase, punto ".purple",

y ahora vamos a añadir las propiedades que nos darán un coloreado más sutil,

"background-color: transparent", anulando lo que teníamos antes.

Ok, muy bonito. Así que hemos modificado este texto morado sin modificar este otro texto morado.

Y ahora cada vez que usemos esta clase "purple" dentro de un párrafo como éste,

tendrá los estilos que aplicamos después.

Podemos usar ese espacio para ir más adentro en nuestro documento.

Digamos que queremos aplicar un estilo sólo para las etiquetas "" que están en "´s"

Empezamos con la etiqueta padre "li" y luego un espacio, y luego "strong".

Y tal vez les vamos a dar una altura de línea diferente para que tengan más espacio.

Muy bien. Incluso podemos añadir "ul" antes de "li", si queremos,

para asegurarnos que esto no se aplique a las "´s" que estén dentro de una etiqueta " ".

Como ves, para usar selectores descendentes, debemos pensar muy bien en la estructura de nuestro documento.

Y saber cuáles etiquetas están dentro de otras etiquetas.

Si estás indentando bien, entonces eso te será fácil de hacer,

porque la indentación refleja la jerarquía de las etiquetas.

Fíjate, tenemos esta etiqueta "", y dentro tenemos indentada la etiqueta "",

y dentro de esa tenemos "".

Si no estás indentando bien, bueno, arreglalo ahora,

porque te será mucho más fácil entender la estructura de tu página,

y llegar a los selectores de CSS basados en esa estructura.

Puedes usar ese espacio entre cualquier tipo de selectores.

Como encontrar un tipo de etiqueta particular dentro de un elemento que tiene un determinado "id",

o encontrar un "id" particular debajo de elementos con un nombre de clase particular,

cualquier combinación que necesites usar.

Lo que hay que recordar es que si la estructura de tu página cambia, entonces las reglas anteriores de CSS podrían no aplicar.

Así que piénsalo cuidadosamente cuando los uses, y cómo será probado tu CSS en el futuro.

Podrías usar clases si quieres ser menos dependiente de la estructura de tu página.

Vamos de nuevo a las reglas que escribí y vamos a pensar en ellas.

Estas primeras reglas estilizan todos los elementos de clase "purple" que estén dentro de párrafos de una determinada manera.

Si agrego un nuevo párrafo con elementos de clase "purple" en el futuro, ¿desearía que adquirieran esa propiedad?

Sí, porque pienso que esas propiedades hacen que el párrafo se vea de lo mejor.

¿Necesito una regla más específica?

Bueno, tal vez si ese párrafo estuviera dentro de un elemento con un nombre de clase "article", podría añadir eso a la regla.

Pero por ahora, esto es lo más específica que puedo ser.

La segunda regla le da una determinada altura de línea a los elementos "" que están dentro de la lista.

¿Deseo que los elementos "" que están dentro de los "´s" tengan siempre esa altura de línea?

Mmm, tal vez no. Puede ser que esta regla sea muy genérica.

Como no estoy segura, voy a añadir una clase a esta "",

y luego voy a cambiar ésta a "ul.spacey"

que la hace más específica.

En el futuro conforme mi página web crezca, haré esta regla más o menos específica.

Agrega esta herramienta a tu caja de herramientas de CSS que cada vez es más grande,

y practica con ella para que puedas usarla cuando tenga sentido.