Na parte anterior da série Cascading Style Sheets (CSS) 101, discutimos como lidar com múltiplas regras para um elemento. Este artigo discute outro recurso CSS importante: seletores, que podem ser usados para selecionar elementos dentro de uma página para estilizar uma página da Web.
Tipo de seletor
Os estilos CSS têm muitas maneiras de implementar a seleção de elementos. Os vários métodos de seleção incluem seleção via seletor universal, seletor de tipo, seletor de classe, seletor de ID, seletor de ancestral, seletor de descendente, seletor de irmão adjacente e seletor de atributo.
Aqui veremos cada um desses métodos individualmente (exceto irmãos e atributos adjacentes, que discutiremos na próxima semana). Observação: o suporte do navegador para seletores CSS é inconsistente, mas você pode usar as instruções on-line para verificar se um determinado seletor funciona no navegador de destino.
Universal
Os seletores universais permitem usar estilos em toda a página. Basicamente, um estilo não especifica um elemento, classe, etc. específico, portanto se aplica a todos os elementos da página. Isso é útil para definir cores, fontes, etc.
Os seletores universais podem ser usados para todos os elementos da página, mas podem ser substituídos por seletores específicos. A especificação CSS afirma que um asterisco (*) pode ser usado para representar um seletor universal. A Listagem A demonstra como usar seletores universais para definir o plano de fundo e a fonte padrão da página.
tipo
Uma das maneiras mais comuns de estilizar um elemento é através do seu tipo. Isso significa que um elemento específico possui seu próprio estilo definido, e esse estilo pode ser usado para todos os elementos desse tipo, independentemente da posição do elemento na página. O exemplo na Listagem B demonstra o uso de um seletor de tipo para estilizar todos os elementos de segmento na página.
Com este tipo de seletor, todos os elementos do parágrafo dentro da folha (a menos que sejam substituídos por seletores mais específicos) possuem margens específicas e texto em vermelho. Agora você também pode criar suas próprias classes CSS para lidar com o estilo de elementos específicos na página.
tipo
Os seletores de classe oferecem mais controle do que os seletores de tipo quando se trata de decidir o que um estilo cobre. Os estilos definidos por um seletor de classe podem ser aplicados a todos os elementos com um atributo de classe, independentemente da posição do elemento na página. Ele fornece grande controle sobre quais elementos recebem estilos. O exemplo na Listagem C demonstra o uso de uma classe para formatar apenas o primeiro parágrafo de uma página. Portanto, o primeiro parágrafo tem uma fonte irregular e os parágrafos seguintes são diferentes.
Os seletores de classe não podem usar elementos reservados HTML, como cabeçalho, p, h1, etc. Você também pode usar várias classes para o mesmo elemento, separando-as com espaços. A Listagem D demonstra o uso de diversas classes para definir o estilo de um parágrafo específico.
Você pode combinar seletores de classe com seletores de tipo para estilizar determinados elementos que possuem classes atribuídas. Neste cenário, ao definir estilos, o nome do elemento possui um nome de classe separado por espaços. O exemplo na Listagem E demonstra a técnica pela qual apenas os elementos de segmento que recebem um nome de classe específico são estilizados de uma maneira, enquanto os cabeçalhos que têm o mesmo nome de classe são estilizados de outra maneira. Entrarei em mais detalhes ao usar o atributo ID do elemento.