DEV Community

Carla França
Carla França

Posted on

Seletores

No CSS os seletores organizam a página e dependendo da escolha facilita a manutenção. São usados para padronizar elementos estilizando de características semelhantes. Neste post abordo quatro tipos.

Id

Este seletor considera o valor do Id. Por padrão, deve ser único por página. Navegadores "consideram" a multiplicidade de Id em uma página, mas se por exemplo for implementar javascript, com a função getElementById() o resultado é ineficaz.

  • Sintaxe: #id
  • Único por página
  • Não reutilizável
  • Rígidos

Tag

Também conhecido como seletor de tipo. Quando aplicado, todas as suas instâncias terão o mesmo comportamento. Um bom uso para a regra é usá-la na técnica de reset.
O reset "limpa" as configurações preestabelecidas dos navegadores. Dessa forma, evita conflitos, suaviza as diferenças e alinha o estilo nos browsers.

  • Sintaxe: tag {propriedade : valor}
  • Associado ao objeto identificável do HTML;
  • Sem limitações por página;

Class

Confere melhor visualização e manutenção do código. Pode ser usado em tags diferentes para apresentar os mesmos efeitos. Os componentes não ficam limitados as tags e sim a class.

  • Sintaxe: .class {propriedade : valor}
  • Mais usado
  • Facilita a manutenção
  • Sem limitações por página
  • Reutilizável

*

Seletor universal. Quando aplicado, todos os elementos da página terão o mesmo efeito. Muito usado em testes e não recomendado por deixar a página pesada. Pode ser usado como um seletor filho.

Top comments (0)