Nessa aula vamos detalhar um pouco mais os seletores no CSS: Seletor de tipo, seletor de class, id, etc.

Na aula anterior vimos um exemplo bem básico de seletor no qual atribuímos valores de CSS para o elemento h1. Nessa aula vamos aprofundar um pouco mais sobre os seletores do CSS.

Como já sabemos, o seletor no CSS tem a função de identificar o que você deseja alterar na sua página HTML.

Se quisermos por exemplo pintar uma parede da nossa casa de azul precisamos primeiro saber exatamente qual parede de nossa casa queremos mudar a cor. Essa é a função dos seletores no CSS, identificar corretamente qual elemento da página vai receber a mudança de aparência.

Seletor de tipo

O exemplo que usamos do seletor h1 é considerado um seletor de tipo. É quando identificamos o elemento que vai receber o comando CSS através do seu tipo. Dessa forma todos os elementos “h1” da página receberão a mudança indicada no CSS. Exemplo:

Nesse comando acima informamos que todos os elementos “h1” da nossa página HTML terão a cor verde. No seletor por tipo basta você indicar o tipo do elemento, depois usar “{}” com os valores de CSS dentro.

Se quisermos por exemplo que todas as div’s da nossa página tenham a cor de fundo preta informamos:

Seletor ID

Uma forma de aplicar CSS em nossos elementos é utilizando o seletor por id. Lembra na aula de atributos que aprendemos o atributo id? O CSS tem uma forma especial de usar o atributo id como um seletor.

Para aplicar uma mudança de cor de texto num elemento cujo atributo “id” tenha o valor “paragrafo1” (<p id=”paragrafo1″>Este é o parágrafo 1</p>) usamos:

Para usar o seletor id basta utilizar o “#” antes do nome de identificação do elemento (id), como visto acima.

Seletor class

Outra forma de aplicar CSS nos elementos de sua página é através do seletor class. Class é um atributo do HTML no qual classificamos elementos como integrantes de uma classe.

Se tivermos por exemplo div’s na nossa página que possuem o atributo class “produtos”, podemos facilmente aplicar comandos do CSS para todos esses elementos que fazem parte dessa class:

Semelhante ao seletor id, o seletor por class utiliza o “.” ao início do nome da classe para aplicar mudanças no CSS. Ao fazer isso estamos mudando por exemplo a cor de todos os elementos com class “produtos” de nossa página HTML.

Elementos aninhados

Uma forma legal também de usar seletores para alterar o CSS e que usamos com certa frequência, é através de elementos aninhados.

Digamos que eu queira mudar a cor de texto de todos os parágrafos (<p>) que estão dentro da div com id “minha_div”:

Quando eu digo que um elemento está “aninhado” a outro significa que um elemento está dentro de outro, contido. O seletor por aninhamento indicado acima informa isso, que devemos aplicar o estilo para os elementos “p” que estão dentro de “#minha_div”.

Basta indicar o elemento “container” o elemento pai, que nesse caso foi o elemento com id=”minha_div” dar um espaço e indicar o elemento filho que deve receber o CSS.

No caso acima usamos para indicar o elemento filho o seletor de tipo “p”, mas você poderia usar qualquer seletor como por exemplo:

Nesse caso o CSS aplicaria mudanças de todos os elementos que possuem a class “produtos” que se encontram dentro do elemento “minha_div”.

Agrupando seletores CSS

Outra forma muito legal de aplicar CSS em seus elementos é agrupando seletores. Imagine que você quer que os títulos h1, os elementos com class “produtos” e o elemento com id “texto_2” tenham a mesma cor de texto verde.

Seria uma perda de tempo aplicar individualmente a cor verde em cada seletor desses. Uma forma que podemos usar é agrupando todos eles, e dando apenas um comando CSS para todos:

Ao utilizar os seletores separados por vírgulas, agrupamos todos os elementos que desejamos por exemplo aplicar a cor verde. Isso além de ser mais prático economiza várias linhas de códigos em seu CSS, tornando seu arquivo mais limpo.