0:00:00.531,0:00:04.192
Hemos logrado hacer muchas cosas, con los selectores que hemos visto en CSS:

0:00:04.192,0:00:08.006
seleccionando elementos por nombre de etiqueta, por Id, por nombre de clase.

0:00:08.290,0:00:11.028
Vamos a revisarlos por un momento en esta página web.

0:00:11.257,0:00:13.655
Esta página web es sobre donas.

0:00:13.789,0:00:15.963
Y tiene un encabezado, párrafos,

0:00:15.963,0:00:19.234
y algunos de los párrafos son cortos, de una sóla línea.

0:00:19.242,0:00:23.142
El CSS empieza con una regla sobre seleccionar todas las etiquetas "" de la página web,

0:00:23.142,0:00:25.611
y asignarles un tipo de letra "sans-serif".

0:00:26.074,0:00:30.063
La voy a cambiar a "monospace" para que puedan ver todo lo que está seleccionado.

0:00:30.785,0:00:31.808
¿Lo vieron?

0:00:34.102,0:00:37.836
La siguiente regla selecciona el elemento que tiene un "Id" igual a "donut-header".

0:00:38.034,0:00:41.913
Y sabemos que es un "Id" porque la regla inicia con el símbolo numeral "#".

0:00:42.029,0:00:43.759
Como el "Id" es muy descriptivo,

0:00:43.759,0:00:46.688
me suena a que se ha seleccionado el encabezado grande de arriba,

0:00:46.688,0:00:47.747
y se ha cambiado la fuente.

0:00:47.974,0:00:51.417
Pero voy a desplazarme hacia abajo para confirmar que "" tiene ese "Id".

0:00:51.453,0:00:53.184
Sí, aquí está.

0:00:53.387,0:00:56.790
La última regla selecciona todos los elementos que tienen "fact" como nombre de clase.

0:00:56.896,0:01:00.384
Y sabemos que estamos buscando una clase porque esta regla empieza con un punto.

0:01:00.488,0:01:02.956
Para descubrir cuáles elementos tienen ese nombre de clase,

0:01:02.956,0:01:05.230
puedo ver lo que la regla está haciendo,

0:01:05.230,0:01:07.833
añadiendo un borde en la parte de arriba y de abajo y algo de relleno "padding",

0:01:07.833,0:01:10.462
o puedo buscar dentro de mi HTML el nombre de la clase.

0:01:10.619,0:01:13.148
Puedo ver el nombre de la clase en este párrafo,

0:01:13.148,0:01:14.300
y en este párrafo,

0:01:14.300,0:01:16.461
los dos párrafos que contienen información de una línea,

0:01:16.461,0:01:18.315
y es por eso que tienen el borde.

0:01:18.448,0:01:19.778
Los nombres de clases son geniales,

0:01:19.778,0:01:23.007
porque nos permiten usar los mismos estilos en múltiples elementos.

0:01:23.033,0:01:25.346
Pero hay más que podemos hacer con los nombres de clases,

0:01:25.346,0:01:27.058
y es lo que les voy a mostrar ahora.

0:01:27.230,0:01:29.136
Entonces, tenemos una página web sobre donas,

0:01:29.136,0:01:31.361
pero las donas en realidad no son saludables para ti.

0:01:31.436,0:01:34.007
Puede que sean una de las cosas menos sanas para ti.

0:01:34.030,0:01:36.963
Y también son adictivas, por toda esa azúcar que contienen.

0:01:37.009,0:01:39.644
Así que si vamos a tener una página que hable de ellas,

0:01:39.644,0:01:42.421
probablemente deberíamos advertir a la gente sobre lo poco saludable que son.

0:01:42.539,0:01:47.257
¿Qué tal si hacemos roja esta clase "fact", para realmente mostrar que es una advertencia?

0:01:47.626,0:01:49.015
¿Cómo hacemos eso?

0:01:49.200,0:01:53.401
Bueno, podríamos empezar añadiendo la propiedad "color" a la regla "fact" de CSS,

0:01:53.401,0:01:55.099
y ver qué pasa.

0:01:55.650,0:02:00.326
Pero esto hace que las dos "fact" sean rojas, y la segunda "fact" no es una advertencia,

0:02:00.326,0:02:01.847
es sólo una aclaración de ortografía.

0:02:02.051,0:02:03.845
Así que no queremos que sea roja.

0:02:04.169,0:02:05.578
Podríamos añadir un "Id",

0:02:05.578,0:02:09.573
pero entonces si quisiéramos colorear otras cosas más tarde que son advertencias

0:02:09.573,0:02:10.958
y añadir más advertencias,

0:02:10.958,0:02:14.185
tendríamos que añadir más y más "Id´s", y reglas para esos "Id´s".

0:02:14.391,0:02:19.806
En un caso como éste, lo mejor es añadir otra clase a la etiqueta "".

0:02:20.104,0:02:24.151
Los navegadores en realidad nos permiten añadir las clases que queramos a una etiqueta.

0:02:24.541,0:02:28.532
Para hacer eso, simplemente ponemos el cursor después del último nombre de clase,

0:02:28.532,0:02:33.196
ponemos un espacio, y luego escribimos un nombre nuevo de clase, como "warning".

0:02:33.984,0:02:36.329
Ahora podemos hacer una regla para "warning",

0:02:37.119,0:02:40.243
y mover esta propiedad de color a esta regla.

0:02:40.835,0:02:44.001
Y ahora la clase "fact" de arriba es roja, y la segunda no.

0:02:44.218,0:02:45.411
Hermoso.

0:02:45.852,0:02:49.285
Podemos poner el nombre de clase en más elementos, como antes.

0:02:49.643,0:02:54.121
Tal vez queremos colorear el texto "deep fried",

0:02:54.121,0:02:56.986
lo queremos colorear de rojo porque "deep fried" (fritas) es algo

0:02:56.986,0:02:59.872
a menudo asociado con cosas que no son saludables.

0:03:00.025,0:03:03.692
Así que podemos añadir la clase "warning",

0:03:03.692,0:03:04.626
también roja.

0:03:05.035,0:03:10.820
Ahora, fíjate que esta advertencia de aquí está de color rojo,

0:03:10.820,0:03:14.653
y también tiene un borde arriba y un borde abajo.

0:03:14.795,0:03:17.545
Y eso es lo que pasa cuando usamos muchas clases,

0:03:17.545,0:03:20.578
los navegadores van a revisar todas las reglas que se aplican a ellas,

0:03:20.578,0:03:22.340
y van a aplicar todos los estilos.

0:03:22.733,0:03:26.810
Debemos ser cuidadosos cuando usamos colores para transmitir significados,

0:03:26.810,0:03:28.563
porque algunas personas no distinguen los colores.

0:03:28.636,0:03:31.298
Hay algunas personas que difícilmente pueden notar la diferencia

0:03:31.298,0:03:33.815
entre rojo y negro, tal vez tú seas una de ellas.

0:03:33.899,0:03:37.463
Así que déjenme cambiar nuestra clase para hacerla más evidente para todas las personas.

0:03:38.070,0:03:40.711
Cambiaremos este color y el color de fondo,

0:03:40.711,0:03:44.740
porque cualquier persona podría identificar que un elemento tiene un color de fondo.

0:03:45.104,0:03:47.564
El rojo y negro tienen un contraste muy bajo.

0:03:47.564,0:03:51.304
Y el contraste también es importante para hacer que nuestra página sea legible para todos.

0:03:51.400,0:03:54.080
Así que voy a cambiar el color a blanco.

0:03:54.785,0:03:56.811
Ok, ahora tenemos más contraste,

0:03:56.811,0:03:59.611
y un fondo rojo para las personas que pueden ver el rojo.

0:03:59.994,0:04:04.497
Y como estamos usando clases las dos etiquetas "warning" tienen los mismos estilos.

0:04:04.774,0:04:07.787
Ahora, gracias a la flexibilidad de las clases de CSS,

0:04:07.787,0:04:10.735
podemos salvar al mundo entero de las donas.