WEBVTT 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. 00:00:04.776 --> 00:00:07.987 Afortunadamente, puedo encontrar hermosas pinturas en Internet. 00:00:07.987 --> 00:00:11.278 Incluso aquí en Khan Academy, en nuestra sección de historia del arte. 00:00:11.278 --> 00:00:14.340 Así que hice esta página web con listas de pinturas famosas, 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. 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, 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 "". 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. 00:00:38.886 --> 00:00:43.846 ¡Oh! y tengo que cambiar aquí, porque tenemos dos reglas. 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, 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. 00:00:54.414 --> 00:01:00.020 ¿Cuál es la solución? Cambiar nuestras dos reglas CSS en una sola regla CSS. 00:01:00.020 --> 00:01:04.038 Mmm, piensa en eso por un momento. 00:01:04.038 --> 00:01:08.364 Probablemente sugieras añadir la misma clase a los encabezados "" y "". 00:01:08.364 --> 00:01:12.047 Y eso definitivamente funcionaría, y podríamos tener una sola regla CSS para esa clase. 00:01:12.047 --> 00:01:14.828 Pero en última instancia eso sería más trabajo para nosotros, 00:01:14.828 --> 00:01:19.119 porque tendríamos que recordar añadir esa clase cada vez que hagamos un encabezado "" o "". 00:01:19.119 --> 00:01:25.495 Afortunadamente, hay una mejor manera de hacerlo. Podemos agrupar nuestros selectores usando comas. 00:01:25.495 --> 00:01:31.970 Sólo añadiremos una coma después de "h1" y luego escribiremos "h2". 00:01:31.970 --> 00:01:37.262 Y luego podemos borrar esta otra regla porque está contenida en la primera. 00:01:37.262 --> 00:01:39.947 ¡Tan tan! Nuestra página web se ve igual. 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. 00:01:44.272 --> 00:01:48.679 Aquí, cambiaré el tipo de letra a cursiva nuevamente, y ahora todo es cursiva. 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. 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. 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. 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. 00:02:14.345 --> 00:02:18.365 Deberías agrupar selectores porque quieres que siempre tengan las mismas propiedades. 00:02:18.365 --> 00:02:21.887 Y eso es generalmente, cuando ellos son semánticamente muy similares. 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. 00:02:28.277 --> 00:02:33.427 Mantente en sintonía para conocer un caso de uso común para agrupar selectores.