Às vezes, você pode querer um número de elementos na sua página web baseadas em HTML5 e CSS3 para compartilhar estilos semelhantes. Dê uma olhada neste exemplo para ver isso em ação.

Os três primeiros títulos todos têm estilos muito semelhantes. Criando três estilos diferentes seria tedioso, então CSS inclui um atalho:

A posição H1
Heading H2
Heading H3

Um elemento de estilo (aquele que começa h1, h2, h3) Fornece todas as informações para todos os três tipos de título. Se incluir mais do que um elemento de um selector de estilo separados por vírgulas, o modelo aplica-se a todos os elementos da lista. Neste exemplo, o tipo de letra cursiva centrado com um fundo amarelo é aplicada a níveis de título 1, 2, e 3 todos no mesmo estilo.

Se você quiser fazer modificações, você pode fazê-lo. As regras de estilo são aplicadas em ordem, assim você sempre pode começar com a regra geral e, em seguida, modificar elementos específicos mais tarde no estilo, se desejar.

Se você tem vários elementos em uma regra selector, faz uma enorme diferença se você usar vírgulas. Se você separar os elementos com espaços (mas sem vírgulas), CSS olha para um elemento aninhado dentro de outro elemento. Se você incluir vírgulas, CSS aplica-se a regra a todos os elementos enumerados.

É possível obter ainda mais específico sobre seletores com pontuação. Por exemplo, a + selector descreve o relacionamento entre irmãos. Por exemplo, olhe para a seguinte regra:

h1 + p

Este tem como alvo apenas o parágrafo que segue imediatamente um nível um headline. Todos os outros parágrafos serão ignorados. Há outros seletores bem, mas as mencionadas aqui será suficiente para a maioria das aplicações.

Você pode se perguntar por que os desenvolvedores precisam de tantos tipos diferentes de seletores. Você pode usar o nome de marca para a maioria dos elementos, e apenas aplicar uma classe ou ID a qualquer elemento que requer atenção especial. Isso é verdade, mas um gol de CSS é manter o seu código HTML mais limpo possível. Você quer usar a estrutura da própria página para ajudar a determinar o estilo.