Grouping selectors

Até agora, todos os nossos seletores focaram apenas em uma classe, um ID ou um elemento. No entanto, o CSS faz com que utilizar mais de um elemento ao mesmo tempo seja algo ridiculamente fácil, permitindo a especificação das mesmas propriedades e regras para mais de um elemento ao mesmo tempo - apenas separe os nomes dos seletores com uma vírgula e pronto, está feito . Essa é outra funcionalidade do CSS que permite maior reutilização de código - não tem por que especificar a mesmas propriedades para cada um dos elementos/classes se você puder reutilizá-las. Temos um exemplo bacana abaixo:

<style type="text/css">
h1, h2, h3 {
	color: Maroon;
}
</style>

<h1>Main header</h1>

<h2>Header level 2</h2>

<h3>Header level 3</h3>

Como podemos ver, agora é possível incluir os elementos h1,h2 e h3 com uma única regra, ao invés de especificá-la para cada um deles em particular. Você também pode misturar a sintaxe das tags com as de ID e classes se quiser:

h1#main, h2.sub, h3, .someClass, #anID {
	color: Maroon;
}

Uma coisa muito legal é que graças ao CSS e sua forma de cascata, é possível adicionar regras específicas para um ou vários elementos e o navegador aplicará cada uma de acordo com a ordem de precedência (falaremos sobre isso mais à frente). Veja o seguinte exemplo:

<style type="text/css">
h1, h2, h3 {
	color: Maroon;
	text-align: center;
}

h1 {
	background-color: Silver;
	padding: 10px;
	text-align: left;
}

h2, h3 {
	background-color: Gray;
	padding: 5px;
}
</style>

<h1>Main header</h1>

<h2>Header level 2</h2>

<h3>Header level 3</h3>

Faça o teste desse exemplo e perceba como o navegador usa as propriedades dos seletores de forma apropriada. Nós podemos agrupar as propriedades comuns em um seletor, e em seguida conseguimos adicionar e até mesmo modificá-las em seletores mais específicos declarados depois.

Resumo

Agrupar seletores torna a reutilização de código CSS muito mais fácil, ao mesmo tempo que mantém um alto grau de flexibilidade - se uma regra comum for utilizada em vários locais, você ainda pode alterá-la ao escrever um seletor mais específico.