Dev NotesCascading Style Sheets (Tipo a maquiagem do seu site)

Seletores CSS3

Os seletores CSS3 são como nossos dedos mágicos pra escolher exatamente quais elementos HTML a gente quer dar um talento no visual.

Sumário:

  1. Seletor Universal (*) - O Coringa dos Seletores - Esse seletor é tipo um 'alerta geral'! Ele pega absolutamente TUDO que tiver de HTML na página e aplica o estilo que você mandar.
  2. Elemento (ou Tag) - Aqui é direto ao ponto: você fala o nome da tag HTML (tipo `div`, `p`, `span`) e ele seleciona todas elas.
  3. ID - O Identificador Único - O ID é como se fosse o RG do elemento. Cada ID é único na página, e você usa o '#' antes do nome do ID pra selecionar um elemento específico.
  4. Classe - O Rótulo dos Elementos - As classes são como 'rótulos' que você pode dar pra vários elementos. Pra selecionar pela classe, você usa um '.' antes do nome da classe.
  5. Atributo - O Detetive dos Elementos - Com esse seletor, você escolhe elementos que têm um certo atributo, não importa o valor dele.
  6. Atributo e Valor - Aqui você é mais específico: seleciona só os elementos que têm um atributo com um valor EXATO que você definir.
  7. Atributo e Valor Contido - Esse é pra quando o valor do atributo tem UMA DAS PALAVRAS que você especificar (separadas por espaço). Usa o '~='.
  8. Atributo e Valor Igual ou Iniciado - Serve pra pegar elementos com um atributo que tem o valor EXATO que você falou OU começa com esse valor seguido de um '-'. Tipo pra selecionar idiomas ('lang'). Usa o '|='.
  9. Atributo e Valor Iniciado - Com esse, você pega os elementos cujo atributo COMEÇA com o valor que você indicar. Usa o '^='.
  10. Atributo e Valor Terminado - Esse aqui é pra selecionar os elementos cujo atributo TERMINA com o valor que você disser. Usa o '$='.
  11. Atributo e Valor Contido (substring) - Esse é pra quando o valor do atributo CONTÉM EM QUALQUER LUGAR o pedacinho de texto que você especificar. Usa o '*='.
  12. Elementos Aninhados - O Poder do Aninhamento - Pra estilizar elementos que estão DENTRO de outros. Aqui, o '&' representa o elemento 'pai' pra você não ter que repetir ele.
  13. Composição de Seletores - O Combo Poderoso - Aqui a gente mistura vários seletores pra ser ainda mais específico! Você pode usar vírgula pra aplicar o mesmo estilo pra várias coisas diferentes, ou juntar seletores pra pegar só quem cumpre todas as condições.

Seletor Universal (*) - O Coringa dos Seletores

Esse seletor é tipo um 'alerta geral'! Ele pega absolutamente TUDO que tiver de HTML na página e aplica o estilo que você mandar.

Exemplo:

1* {
2	color: red;
3}

Elemento (ou Tag)

Aqui é direto ao ponto: você fala o nome da tag HTML (tipo `div`, `p`, `span`) e ele seleciona todas elas.

Exemplo:

1div {
2	color: red;
3}

ID - O Identificador Único

O ID é como se fosse o RG do elemento. Cada ID é único na página, e você usa o '#' antes do nome do ID pra selecionar um elemento específico.

Exemplo:

1#id {
2	color: red;
3}

Classe - O Rótulo dos Elementos

As classes são como 'rótulos' que você pode dar pra vários elementos. Pra selecionar pela classe, você usa um '.' antes do nome da classe.

Exemplo:

1.classe {
2	color: red;
3}

Atributo - O Detetive dos Elementos

Com esse seletor, você escolhe elementos que têm um certo atributo, não importa o valor dele.

Exemplo:

1[atributo] {
2	color: red;
3}

Atributo e Valor

Aqui você é mais específico: seleciona só os elementos que têm um atributo com um valor EXATO que você definir.

Exemplo:

1[atributo='valor'] {
2	color: red;
3}

Atributo e Valor Contido

Esse é pra quando o valor do atributo tem UMA DAS PALAVRAS que você especificar (separadas por espaço). Usa o '~='.

Exemplo:

1[atributo~='valor'] {
2	color: red;
3}

Atributo e Valor Igual ou Iniciado

Serve pra pegar elementos com um atributo que tem o valor EXATO que você falou OU começa com esse valor seguido de um '-'. Tipo pra selecionar idiomas ('lang'). Usa o '|='.

Exemplo:

1[atributo|='valor'] {
2	color: red;
3}

Atributo e Valor Iniciado

Com esse, você pega os elementos cujo atributo COMEÇA com o valor que você indicar. Usa o '^='.

Exemplo:

1[atributo^='valor'] {
2	color: red;
3}

Atributo e Valor Terminado

Esse aqui é pra selecionar os elementos cujo atributo TERMINA com o valor que você disser. Usa o '$='.

Exemplo:

1[atributo$='valor'] {
2	color: red;
3}

Atributo e Valor Contido (substring)

Esse é pra quando o valor do atributo CONTÉM EM QUALQUER LUGAR o pedacinho de texto que você especificar. Usa o '*='.

Exemplo:

1[atributo*='valor'] {
2	color: red;
3}

Elementos Aninhados - O Poder do Aninhamento

Pra estilizar elementos que estão DENTRO de outros. Aqui, o '&' representa o elemento 'pai' pra você não ter que repetir ele.

Exemplo:

1pai {
2	& > filho {
3		color: red;
4	}
5}

Composição de Seletores - O Combo Poderoso

Aqui a gente mistura vários seletores pra ser ainda mais específico! Você pode usar vírgula pra aplicar o mesmo estilo pra várias coisas diferentes, ou juntar seletores pra pegar só quem cumpre todas as condições.

Exemplo:

1div, #id, .classe {
2	color: red;
3}
4
5div.classe {
6	color: red;
7}
8
9#id.classe {
10	color: red;
11}
12
13div#id {
14	color: red;
15}
16
17div.classe[id='valor'] {
18	color: red;
19}