1
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.

2
00:00:04,776 --> 00:00:07,727
Felizmente, eu posso encontrar ótimas
pinturas na internet.

3
00:00:07,987 --> 00:00:11,278
Como várias aqui no Khan Academy, 
na nossa sessão de arte histórica.

4
00:00:11,278 --> 00:00:14,580
Fiz então esta página com lista de
pinturas famosas,

5
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.


6
00:00:21,318 --> 00:00:24,974
Para fazer essa página ficar mais chique

7
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>

8
00:00:31,149 --> 00:00:38,886
Eu gosto de cursiva, mas <i>fantasy</i> pode
ficar melhor, vamos mudar para ver.

9
00:00:38,886 --> 00:00:43,846
Preciso mudar também aqui, 
porque temos duas regras.

10
00:00:43,846 --> 00:00:49,262
Eu sempre quero meus cabeçalhos nesta
página tendo a mesma família de fonte

11
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.

12
00:00:54,414 --> 00:01:00,880
Qual é a solução aqui para colocar
as duas regras CSS em uma só?

13
00:01:00,880 --> 00:01:03,778
Pense um pouco nisso.

14
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>.

15
00:01:08,074 --> 00:01:12,047
E realmente funcionaria, teríamos apenas
uma regra CSS para aquela classe.

16
00:01:12,047 --> 00:01:14,708
Mas no final daria mais trabalho

17
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>.

18
00:01:19,119 --> 00:01:25,495
Felizmente, existe um jeito melhor. Basta
agrupar nossos seletores usando vírgulas.

19
00:01:26,355 --> 00:01:31,970
Apenas adicionamos vírgula após este <i>h1</i>,
e escrevemos <i>h2</i>.

20
00:01:31,970 --> 00:01:37,262
Agora podemos deletar esta outra regra,
pois unimos nesta primeira.

21
00:01:37,262 --> 00:01:39,947
Olha só, nossa página está igual!

22
00:01:39,947 --> 00:01:44,272
Agora quando queremos mudar de fonte,
eu posso fazer isso em apenas um lugar.

23
00:01:44,272 --> 00:01:48,679
Aqui, irá mudar de volta à cursiva,
e agora todas são cursiva.

24
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.

25
00:01:55,765 --> 00:02:03,046
Um espaço pega seletores descendentes,
o que é totalmente diferente em CSS.

26
00:02:03,046 --> 00:02:08,516
Agrupar seletores pode ser ótimo para
reduzir a redundância de seletores.

27
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.

28
00:02:13,710 --> 00:02:18,340
Você deve agrupá-los se você sempre quer
que tenham sempre as mesmas propriedades.

29
00:02:18,365 --> 00:02:21,887
Normalmente porque eles são 
semanticamente parecidos entre si.

30
00:02:21,887 --> 00:02:28,262
Neste caso, meu seletor é para todos os 
cabeçalhos, quais quero os mesmos estilos.

31
00:02:28,262 --> 00:02:31,988
Fique ligado para mais um uso comum
de grupos de seletores.

32
00:02:32,028 --> 00:02:34,000
Traduzido por [Paulo Trentin]
Revisado por [Fernando dos Reis]