WEBVTT

00:00:00.665 --> 00:00:04.776
Eu amo a arte dos museus. Mas não tenho
tempo para ir a um todo dia.

00:00:04.776 --> 00:00:07.727
Felizmente, eu posso encontrar ótimas
pinturas na internet.

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

00:00:11.278 --> 00:00:14.580
Fiz então esta página com lista de
pinturas famosas,

00:00:14.580 --> 00:00:21.318
com um cabeçalho e listas para cada arte,
e links para o artigo de cada uma delas.


00:00:21.318 --> 00:00:24.974
Para fazer essa página ficar mais chique

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

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

00:00:38.886 --> 00:00:43.846
Preciso mudar também aqui, 
porque temos duas regras.

00:00:43.846 --> 00:00:49.262
Eu sempre quero meus cabeçalhos nesta
página tendo a mesma família de fonte

00:00:49.262 --> 00:00:54.414
e eu não quero ter que mudar a fonte 
em dois lugares quando mudar de ideia.

00:00:54.414 --> 00:01:00.880
Qual é a solução aqui para colocar
as duas regras CSS em uma só?

00:01:00.880 --> 00:01:03.778
Pense um pouco nisso.

00:01:03.778 --> 00:01:08.074
Você poderia sugerir a adição da mesma
classe no <i>< h1 ></i> e <i>< h2 ></i>.

00:01:08.074 --> 00:01:12.047
E realmente funcionaria, teríamos apenas
uma regra CSS para aquela classe.

00:01:12.047 --> 00:01:14.708
Mas no final daria mais trabalho

00:01:14.708 --> 00:01:19.119
porque precisaríamos lembrar de adicionar
a classe em cada <i>< h1 ></i> ou <i>< h2 ></i>.

00:01:19.119 --> 00:01:25.495
Felizmente, existe um jeito melhor. Basta
agrupar nossos seletores usando vírgulas.

00:01:26.355 --> 00:01:31.970
Apenas adicionamos vírgula após este <i>h1</i>,
e escrevemos <i>h2</i>.

00:01:31.970 --> 00:01:37.262
Agora podemos deletar esta outra regra,
pois unimos nesta primeira.

00:01:37.262 --> 00:01:39.947
Olha só, nossa página está igual!

00:01:39.947 --> 00:01:44.272
Agora quando queremos mudar de fonte,
eu posso fazer isso em apenas um lugar.

00:01:44.272 --> 00:01:48.679
Aqui, irá mudar de volta à cursiva,
e agora todas são cursiva.

00:01:48.679 --> 00:01:55.765
Cuidado com esta vírgula. O seletor deve
ser separado por vírgula, não espaço.

00:01:55.765 --> 00:02:03.046
Um espaço pega seletores descendentes,
o que é totalmente diferente em CSS.

00:02:03.046 --> 00:02:08.516
Agrupar seletores pode ser ótimo para
reduzir a redundância de seletores.

00:02:08.516 --> 00:02:13.710
Mas não use com excesso. Não agrupe-os só
porque quer algumas propriedades em comum.

00:02:13.710 --> 00:02:18.340
Você deve agrupá-los se você sempre quer
que tenham sempre as mesmas propriedades.

00:02:18.365 --> 00:02:21.887
Normalmente porque eles são 
semanticamente parecidos entre si.

00:02:21.887 --> 00:02:28.262
Neste caso, meu seletor é para todos os 
cabeçalhos, quais quero os mesmos estilos.

00:02:28.262 --> 00:02:31.988
Fique ligado para mais um uso comum
de grupos de seletores.

00:02:32.028 --> 00:02:34.000
Traduzido por [Paulo Trentin]
Revisado por [Fernando dos Reis]