1
00:00:00,809 --> 00:00:05,432
Vamos a cambiar, de donas a zanahorias, una de las comidas más saludables del mundo.

2
00:00:05,432 --> 00:00:07,901
Además de que es la comida favorita de los conejos.

3
00:00:07,901 --> 00:00:10,534
¿Sabías que las zanahorias no sólo son de color naranja?

4
00:00:10,534 --> 00:00:13,535
Originalmente eran moradas. Hay algunas moradas todavía.

5
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.

6
00:00:19,541 --> 00:00:25,267
Y hemos usado clases para estilizar los nombres de los colores con el color correspondiente.

7
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.

8
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í.

9
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?

10
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.

11
00:00:49,300 --> 00:00:52,919
También tienen el mismo nombre de etiqueta, los dos son "´s"

12
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.

13
00:00:58,013 --> 00:01:00,663
¿Hay algo más que sea diferente entre ellos?

14
00:01:00,663 --> 00:01:06,376
Bueno, una cosa diferente es que esta etiqueta "" está dentro de esta etiqueta "",

15
00:01:06,376 --> 00:01:10,985
y esta etiqueta "" está dentro de "".

16
00:01:10,985 --> 00:01:15,583
Así que la diferencia son sus etiquetas padres, las etiquetas que están sobre ellas.

17
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",

18
00:01:21,102 --> 00:01:25,216
es una manera de seleccionar elementos basada en la posición que tienen en el documento.

19
00:01:25,216 --> 00:01:30,624
Por ejemplo, para seleccionar solamente "purple" de la etiqueta "" dentro del párrafo,

20
00:01:30,624 --> 00:01:35,776
debemos escribir "p" y luego un espacio, el espacio es muy importante,

21
00:01:35,776 --> 00:01:40,381
y luego el nombre de la clase, punto ".purple",

22
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,

23
00:01:46,112 --> 00:01:50,311
"background-color: transparent", anulando lo que teníamos antes.

24
00:01:50,311 --> 00:01:58,802
Ok, muy bonito. Así que hemos modificado este texto morado sin modificar este otro texto morado.

25
00:01:58,802 --> 00:02:02,879
Y ahora cada vez que usemos esta clase "purple" dentro de un párrafo como éste,

26
00:02:02,879 --> 00:02:05,324
tendrá los estilos que aplicamos después.

27
00:02:05,324 --> 00:02:09,588
Podemos usar ese espacio para ir más adentro en nuestro documento.

28
00:02:09,588 --> 00:02:15,728
Digamos que queremos aplicar un estilo sólo para las etiquetas "" que están en "´s"

29
00:02:15,728 --> 00:02:23,143
Empezamos con la etiqueta padre "li" y luego un espacio, y luego "strong".

30
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.

31
00:02:28,066 --> 00:02:34,073
Muy bien. Incluso podemos añadir "ul" antes de "li", si queremos,

32
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 " ".

33
00:02:38,525 --> 00:02:43,807
Como ves, para usar selectores descendentes, debemos pensar muy bien en la estructura de nuestro documento.

34
00:02:43,807 --> 00:02:46,102
Y saber cuáles etiquetas están dentro de otras etiquetas.

35
00:02:46,102 --> 00:02:49,512
Si estás indentando bien, entonces eso te será fácil de hacer,

36
00:02:49,512 --> 00:02:52,508
porque la indentación refleja la jerarquía de las etiquetas.

37
00:02:52,508 --> 00:02:56,955
Fíjate, tenemos esta etiqueta "", y dentro tenemos indentada la etiqueta "",

38
00:02:56,955 --> 00:02:59,341
y dentro de esa tenemos "".

39
00:02:59,341 --> 00:03:02,926
Si no estás indentando bien, bueno, arreglalo ahora,

40
00:03:02,926 --> 00:03:07,024
porque te será mucho más fácil entender la estructura de tu página,

41
00:03:07,024 --> 00:03:10,609
y llegar a los selectores de CSS basados en esa estructura.

42
00:03:10,609 --> 00:03:13,598
Puedes usar ese espacio entre cualquier tipo de selectores.

43
00:03:13,598 --> 00:03:19,021
Como encontrar un tipo de etiqueta particular dentro de un elemento que tiene un determinado "id",

44
00:03:19,021 --> 00:03:22,463
o encontrar un "id" particular debajo de elementos con un nombre de clase particular,

45
00:03:22,463 --> 00:03:25,333
cualquier combinación que necesites usar.

46
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.

47
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.

48
00:03:37,185 --> 00:03:41,300
Podrías usar clases si quieres ser menos dependiente de la estructura de tu página.

49
00:03:41,300 --> 00:03:45,612
Vamos de nuevo a las reglas que escribí y vamos a pensar en ellas.

50
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.

51
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?

52
00:03:57,589 --> 00:04:02,371
Sí, porque pienso que esas propiedades hacen que el párrafo se vea de lo mejor.

53
00:04:02,371 --> 00:04:04,401
¿Necesito una regla más específica?

54
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.

55
00:04:11,186 --> 00:04:14,249
Pero por ahora, esto es lo más específica que puedo ser.

56
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.

57
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?

58
00:04:26,039 --> 00:04:30,978
Mmm, tal vez no. Puede ser que esta regla sea muy genérica.

59
00:04:30,978 --> 00:04:36,778
Como no estoy segura, voy a añadir una clase a esta "",

60
00:04:36,778 --> 00:04:42,032
y luego voy a cambiar ésta a "ul.spacey"

61
00:04:42,032 --> 00:04:44,652
que la hace más específica.

62
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.

63
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,

64
00:04:53,659 --> 00:04:57,382
y practica con ella para que puedas usarla cuando tenga sentido.