WEBVTT 00:00:00.809 --> 00:00:05.432 Vamos a cambiar, de donas a zanahorias, una de las comidas más saludables del mundo. 00:00:05.432 --> 00:00:07.901 Además de que es la comida favorita de los conejos. 00:00:07.901 --> 00:00:10.534 ¿Sabías que las zanahorias no sólo son de color naranja? 00:00:10.534 --> 00:00:13.535 Originalmente eran moradas. Hay algunas moradas todavía. 00:00:13.535 --> 00:00:19.541 Tenemos aquí una pequeña página web con una lista de colores y un enunciado sobre su origen morado. 00:00:19.541 --> 00:00:25.267 Y hemos usado clases para estilizar los nombres de los colores con el color correspondiente. 00:00:25.267 --> 00:00:31.905 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. 00:00:31.905 --> 00:00:36.215 Creo que es mejor quitar el color de fondo, y usar un color más sutil allí. 00:00:36.215 --> 00:00:43.778 ¿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? 00:00:43.778 --> 00:00:49.300 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. 00:00:49.300 --> 00:00:52.919 También tienen el mismo nombre de etiqueta, los dos son "´s" 00:00:52.919 --> 00:00:58.013 Así que no podemos usar el selector de elemento más nombre de clase que acabamos de aprender. 00:00:58.013 --> 00:01:00.663 ¿Hay algo más que sea diferente entre ellos? 00:01:00.663 --> 00:01:06.376 Bueno, una cosa diferente es que esta etiqueta "" está dentro de esta etiqueta "", 00:01:06.376 --> 00:01:10.985 y esta etiqueta "" está dentro de "". 00:01:10.985 --> 00:01:15.583 Así que la diferencia son sus etiquetas padres, las etiquetas que están sobre ellas. 00:01:15.583 --> 00:01:21.102 Podemos usar esa información para hacer una regla de CSS, usando lo que llamamos "selector descendente", 00:01:21.102 --> 00:01:25.216 es una manera de seleccionar elementos basada en la posición que tienen en el documento. 00:01:25.216 --> 00:01:30.624 Por ejemplo, para seleccionar solamente "purple" de la etiqueta "" dentro del párrafo, 00:01:30.624 --> 00:01:35.776 debemos escribir "p" y luego un espacio, el espacio es muy importante, 00:01:35.776 --> 00:01:40.381 y luego el nombre de la clase, punto ".purple", 00:01:40.381 --> 00:01:46.112 y ahora vamos a añadir las propiedades que nos darán un coloreado más sutil, 00:01:46.112 --> 00:01:50.311 "background-color: transparent", anulando lo que teníamos antes. 00:01:50.311 --> 00:01:58.802 Ok, muy bonito. Así que hemos modificado este texto morado sin modificar este otro texto morado. 00:01:58.802 --> 00:02:02.879 Y ahora cada vez que usemos esta clase "purple" dentro de un párrafo como éste, 00:02:02.879 --> 00:02:05.324 tendrá los estilos que aplicamos después. 00:02:05.324 --> 00:02:09.588 Podemos usar ese espacio para ir más adentro en nuestro documento. 00:02:09.588 --> 00:02:15.728 Digamos que queremos aplicar un estilo sólo para las etiquetas "" que están en "´s" 00:02:15.728 --> 00:02:23.143 Empezamos con la etiqueta padre "li" y luego un espacio, y luego "strong". 00:02:23.143 --> 00:02:28.066 Y tal vez les vamos a dar una altura de línea diferente para que tengan más espacio. 00:02:28.066 --> 00:02:34.073 Muy bien. Incluso podemos añadir "ul" antes de "li", si queremos, 00:02:34.073 --> 00:02:38.525 para asegurarnos que esto no se aplique a las "´s" que estén dentro de una etiqueta " ". 00:02:38.525 --> 00:02:43.807 Como ves, para usar selectores descendentes, debemos pensar muy bien en la estructura de nuestro documento. 00:02:43.807 --> 00:02:46.102 Y saber cuáles etiquetas están dentro de otras etiquetas. 00:02:46.102 --> 00:02:49.512 Si estás indentando bien, entonces eso te será fácil de hacer, 00:02:49.512 --> 00:02:52.508 porque la indentación refleja la jerarquía de las etiquetas. 00:02:52.508 --> 00:02:56.955 Fíjate, tenemos esta etiqueta "", y dentro tenemos indentada la etiqueta "", 00:02:56.955 --> 00:02:59.341 y dentro de esa tenemos "". 00:02:59.341 --> 00:03:02.926 Si no estás indentando bien, bueno, arreglalo ahora, 00:03:02.926 --> 00:03:07.024 porque te será mucho más fácil entender la estructura de tu página, 00:03:07.024 --> 00:03:10.609 y llegar a los selectores de CSS basados en esa estructura. 00:03:10.609 --> 00:03:13.598 Puedes usar ese espacio entre cualquier tipo de selectores. 00:03:13.598 --> 00:03:19.021 Como encontrar un tipo de etiqueta particular dentro de un elemento que tiene un determinado "id", 00:03:19.021 --> 00:03:22.463 o encontrar un "id" particular debajo de elementos con un nombre de clase particular, 00:03:22.463 --> 00:03:25.333 cualquier combinación que necesites usar. 00:03:25.333 --> 00:03:32.230 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. 00:03:32.230 --> 00:03:37.185 Así que piénsalo cuidadosamente cuando los uses, y cómo será probado tu CSS en el futuro. 00:03:37.185 --> 00:03:41.300 Podrías usar clases si quieres ser menos dependiente de la estructura de tu página. 00:03:41.300 --> 00:03:45.612 Vamos de nuevo a las reglas que escribí y vamos a pensar en ellas. 00:03:45.612 --> 00:03:51.383 Estas primeras reglas estilizan todos los elementos de clase "purple" que estén dentro de párrafos de una determinada manera. 00:03:51.383 --> 00:03:57.589 Si agrego un nuevo párrafo con elementos de clase "purple" en el futuro, ¿desearía que adquirieran esa propiedad? 00:03:57.589 --> 00:04:02.371 Sí, porque pienso que esas propiedades hacen que el párrafo se vea de lo mejor. 00:04:02.371 --> 00:04:04.401 ¿Necesito una regla más específica? 00:04:04.401 --> 00:04:11.186 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. 00:04:11.186 --> 00:04:14.249 Pero por ahora, esto es lo más específica que puedo ser. 00:04:14.249 --> 00:04:21.178 La segunda regla le da una determinada altura de línea a los elementos "" que están dentro de la lista. 00:04:21.178 --> 00:04:26.039 ¿Deseo que los elementos "" que están dentro de los "´s" tengan siempre esa altura de línea? 00:04:26.039 --> 00:04:30.978 Mmm, tal vez no. Puede ser que esta regla sea muy genérica. 00:04:30.978 --> 00:04:36.778 Como no estoy segura, voy a añadir una clase a esta "", 00:04:36.778 --> 00:04:42.032 y luego voy a cambiar ésta a "ul.spacey" 00:04:42.032 --> 00:04:44.652 que la hace más específica. 00:04:44.652 --> 00:04:49.840 En el futuro conforme mi página web crezca, haré esta regla más o menos específica. 00:04:49.840 --> 00:04:53.659 Agrega esta herramienta a tu caja de herramientas de CSS que cada vez es más grande, 00:04:53.659 --> 00:04:57.382 y practica con ella para que puedas usarla cuando tenga sentido.