Curso IT Fundamentos CSS 020_Seletores

Seletores

Os seletores são usados para selecionar os elementos do documento que precisam ser estilizados. Através de diferentes modos de seleção, informam ao navegador quais elementos recebem quais estilos.

Seletor ID (#)

Seleciona um elemento pelo seu ID único. O seletor ID deve ser único no documento e não deve ser reutilizado.

Exemplo:

1
#myID {
2
  /* Regras de estilo */
3
}

Seletor de classe (.)

Seleciona elementos pelo nome da classe. Seletores de classe podem ser usados para múltiplos elementos, e um mesmo elemento pode ter múltiplas classes.

Exemplo:

1
.myClass {
2
  /* Regras de estilo */
3
}

Seletor de elemento (p, h1)

Seleciona elementos pelo nome do elemento HTML. O seletor de elemento seleciona todos os elementos correspondentes no documento.

Exemplo:

1
p {
2
  /* Regras de estilo */
3
}

Seletor universal (*)

Seleciona todos os elementos do documento. Deve ser usado com cautela pois corresponde a todos os elementos e pode afetar o desempenho.

Exemplo:

1
* {
2
  /* Regras de estilo */
3
}

Seletor de atributo ([type="text"])

Seleciona elementos pelos seus valores de atributo. Seletores de atributo podem selecionar elementos com base em diferentes valores de atributo.

Exemplo:

1
input[type="text"] {
2
  /* Regras de estilo */
3
}

Seletor de pseudo-classe

Seleciona estados ou posições especiais dos elementos, como hover, visitado, etc.

Exemplo:

1
a:hover {
2
  /* Regras de estilo */
3
}

Seletor de pseudo-elemento

Seleciona partes especiais dos elementos, como a primeira linha, a primeira letra, etc.

Exemplo:

1
p::first-line {
2
  /* Regras de estilo */
3
}

Seletor de filho

Seleciona os elementos filhos diretos de um elemento. Seleciona apenas filhos diretos, não descendentes.

Exemplo:

1
ul > li {
2
  /* Regras de estilo */
3
}

Seletor geral de irmãos

Seleciona todos os elementos irmãos com o mesmo elemento pai. Seleciona todos os elementos irmãos após o elemento especificado, sem exigir adjacência.

Exemplo:

1
h2 ~ p {
2
  /* Regras de estilo */
3
}

Seletor de irmão adjacente

Seleciona o elemento irmão imediatamente após o elemento especificado.

Exemplo:

1
h2 + p {
2
  /* Regras de estilo */
3
}

Seletor de descendentes

Seleciona todos os elementos descendentes sob um elemento, incluindo elementos profundamente aninhados.

Exemplo:

1
div p {
2
  /* Regras de estilo */
3
}

Seletor de união (,)

Combina múltiplos seletores para selecionar todos os elementos que correspondam a qualquer um deles. Usado para selecionar simultaneamente múltiplos tipos de elementos e aplicar as mesmas regras de estilo.

Exemplo:

1
h1, h2, h3 {
2
  /* Regras de estilo */
3
}

Lista de seletores

Lista múltiplos seletores por ordem de prioridade para selecionar o mais adequado.

Exemplo:

1
div p,
2
.myClass,
3
#myID {
4
  /* Regras de estilo */
5
}

Regras de nomenclatura de seletores

• Os nomes dos seletores devem ser compostos por letras, números, underscores ou hífens.

• Os nomes devem começar com uma letra ou underscore.

• Os nomes não podem começar com um número.

• Os nomes não podem conter espaços.

  Recomendações:

• Use nomes significativos: Os nomes dos seletores devem refletir claramente a função ou propósito do elemento selecionado.

• Siga convenções de nomenclatura: Use convenções consistentes como camelCase ou kebab-case para melhorar a consistência do código.

• Evite abreviações sem sentido: Evite abreviações muito curtas ou sem significado para que outros desenvolvedores possam entender.

• Siga a semântica: Use seletores semânticos para melhorar a legibilidade e manutenibilidade do código.