0:00:00.665,0:00:04.776
Eu amo a arte dos museus. Mas não tenho[br]tempo para ir a um todo dia.

0:00:04.776,0:00:07.727
Felizmente, eu posso encontrar ótimas[br]pinturas na internet.

0:00:07.987,0:00:11.278
Como várias aqui no Khan Academy, [br]na nossa sessão de arte histórica.

0:00:11.278,0:00:14.580
Fiz então esta página com lista de[br]pinturas famosas,

0:00:14.580,0:00:21.318
com um cabeçalho e listas para cada arte,[br]e links para o artigo de cada uma delas.[br]

0:00:21.318,0:00:24.974
Para fazer essa página ficar mais chique

0:00:25.164,0:00:31.099
usei regras CSS para mudar a família[br]da fonte dos títulos <i>< h1 ></i> e <i>< h2 ></i>

0:00:31.149,0:00:38.886
Eu gosto de cursiva, mas <i>fantasy</i> pode[br]ficar melhor, vamos mudar para ver.

0:00:38.886,0:00:43.846
Preciso mudar também aqui, [br]porque temos duas regras.

0:00:43.846,0:00:49.262
Eu sempre quero meus cabeçalhos nesta[br]página tendo a mesma família de fonte

0:00:49.262,0:00:54.414
e eu não quero ter que mudar a fonte [br]em dois lugares quando mudar de ideia.

0:00:54.414,0:01:00.880
Qual é a solução aqui para colocar[br]as duas regras CSS em uma só?

0:01:00.880,0:01:03.778
Pense um pouco nisso.

0:01:03.778,0:01:08.074
Você poderia sugerir a adição da mesma[br]classe no <i>< h1 ></i> e <i>< h2 ></i>.

0:01:08.074,0:01:12.047
E realmente funcionaria, teríamos apenas[br]uma regra CSS para aquela classe.

0:01:12.047,0:01:14.708
Mas no final daria mais trabalho

0:01:14.708,0:01:19.119
porque precisaríamos lembrar de adicionar[br]a classe em cada <i>< h1 ></i> ou <i>< h2 ></i>.

0:01:19.119,0:01:25.495
Felizmente, existe um jeito melhor. Basta[br]agrupar nossos seletores usando vírgulas.

0:01:26.355,0:01:31.970
Apenas adicionamos vírgula após este <i>h1</i>,[br]e escrevemos <i>h2</i>.

0:01:31.970,0:01:37.262
Agora podemos deletar esta outra regra,[br]pois unimos nesta primeira.

0:01:37.262,0:01:39.947
Olha só, nossa página está igual!

0:01:39.947,0:01:44.272
Agora quando queremos mudar de fonte,[br]eu posso fazer isso em apenas um lugar.

0:01:44.272,0:01:48.679
Aqui, irá mudar de volta à cursiva,[br]e agora todas são cursiva.

0:01:48.679,0:01:55.765
Cuidado com esta vírgula. O seletor deve[br]ser separado por vírgula, não espaço.

0:01:55.765,0:02:03.046
Um espaço pega seletores descendentes,[br]o que é totalmente diferente em CSS.

0:02:03.046,0:02:08.516
Agrupar seletores pode ser ótimo para[br]reduzir a redundância de seletores.

0:02:08.516,0:02:13.710
Mas não use com excesso. Não agrupe-os só[br]porque quer algumas propriedades em comum.

0:02:13.710,0:02:18.340
Você deve agrupá-los se você sempre quer[br]que tenham sempre as mesmas propriedades.

0:02:18.365,0:02:21.887
Normalmente porque eles são [br]semanticamente parecidos entre si.

0:02:21.887,0:02:28.262
Neste caso, meu seletor é para todos os [br]cabeçalhos, quais quero os mesmos estilos.

0:02:28.262,0:02:31.988
Fique ligado para mais um uso comum[br]de grupos de seletores.

0:02:32.028,0:02:34.000
Traduzido por [Paulo Trentin][br]Revisado por [Fernando dos Reis]