1
00:00:00,235 --> 00:00:04,776
Amo los museos de arte. Pero no tengo tiempo para ir a museos de arte todos los días.

2
00:00:04,776 --> 00:00:07,987
Afortunadamente, puedo encontrar hermosas pinturas en Internet.

3
00:00:07,987 --> 00:00:11,278
Incluso aquí en Khan Academy, en nuestra sección de historia del arte.

4
00:00:11,278 --> 00:00:14,340
Así que hice esta página web con listas de pinturas famosas,

5
00:00:14,340 --> 00:00:21,318
con un encabezado y listas por cada estilo artístico, y enlaces a artículos sobre cada una de las pinturas.

6
00:00:21,318 --> 00:00:25,164
Para hacer que esta página web se vea más llamativa, ya sabes, más artística,

7
00:00:25,164 --> 00:00:31,149
he aplicado reglas de CSS para cambiar el tipo de letra de dos de los encabezados los "" y los "".

8
00:00:31,149 --> 00:00:38,886
Me gusta la letra cursiva, pero pienso que "fantasy" debe lucir mejor, así que déjenme cambiar eso.

9
00:00:38,886 --> 00:00:43,846
¡Oh! y tengo que cambiar aquí, porque tenemos dos reglas.

10
00:00:43,846 --> 00:00:49,262
Pero en realidad, quiero que mis encabezados en esta página tengan siempre el mismo tipo de letra,

11
00:00:49,262 --> 00:00:54,414
y no quiero tener que estar cambiando el tipo de letra en dos lugares, cada vez que cambio de parecer.

12
00:00:54,414 --> 00:01:00,020
¿Cuál es la solución? Cambiar nuestras dos reglas CSS en una sola regla CSS.

13
00:01:00,020 --> 00:01:04,038
Mmm, piensa en eso por un momento.

14
00:01:04,038 --> 00:01:08,364
Probablemente sugieras añadir la misma clase a los encabezados "" y "".

15
00:01:08,364 --> 00:01:12,047
Y eso definitivamente funcionaría, y podríamos tener una sola regla CSS para esa clase.

16
00:01:12,047 --> 00:01:14,828
Pero en última instancia eso sería más trabajo para nosotros,

17
00:01:14,828 --> 00:01:19,119
porque tendríamos que recordar añadir esa clase cada vez que hagamos un encabezado "" o "".

18
00:01:19,119 --> 00:01:25,495
Afortunadamente, hay una mejor manera de hacerlo. Podemos agrupar nuestros selectores usando comas.

19
00:01:25,495 --> 00:01:31,970
Sólo añadiremos una coma después de "h1" y luego escribiremos "h2".

20
00:01:31,970 --> 00:01:37,262
Y luego podemos borrar esta otra regla porque está contenida en la primera.

21
00:01:37,262 --> 00:01:39,947
¡Tan tan! Nuestra página web se ve igual.

22
00:01:39,947 --> 00:01:44,272
Ahora cuando quiero experimentar con el cambio de tipo de letra, lo puedo hacer en un sólo lugar.

23
00:01:44,272 --> 00:01:48,679
Aquí, cambiaré el tipo de letra a cursiva nuevamente, y ahora todo es cursiva.

24
00:01:48,679 --> 00:01:55,765
Ten mucho cuidado con esta coma. Los selectores tienen que estar separados por coma, no por espacios.

25
00:01:55,765 --> 00:02:03,046
Como hemos visto, un espacio se usa para selectores descendentes, y significa algo completamente diferente para CSS.

26
00:02:03,046 --> 00:02:08,516
Agrupar selectores puede ser una gran herramienta para reducir el número de selectores redundantes que tenemos.

27
00:02:08,516 --> 00:02:14,345
Pero no abuses de eso. No deberías agrupar selectores solamente porque parece que tienen las mismas propiedades ahora.

28
00:02:14,345 --> 00:02:18,365
Deberías agrupar selectores porque quieres que siempre tengan las mismas propiedades.

29
00:02:18,365 --> 00:02:21,887
Y eso es generalmente, cuando ellos son semánticamente muy similares.

30
00:02:21,887 --> 00:02:28,262
En este caso, mi selector es para todos los tipos de encabezados, en los que a menudo quiero compartir los mismos estilos.

31
00:02:28,277 --> 00:02:33,427
Mantente en sintonía para conocer un caso de uso común para agrupar selectores.