Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

No CSS, seletores são usados para marcar elementos HTML nas páginas web que queremos estilizar. Existe uma grande variedade de seletores CSS disponíveis, permitindo selecionar elementos com alta precisão para aplicar-lhes os estilos. Nos próximos artigos abordaremos cada tipo em detalhes, vendo como funcionam.

Pré requisitos:

Conhecimento básico de informática, software básico instalado, conhecimento básico para trabalhar com arquivos, HTML básico (estude Introdução ao HTML), e uma ideia de como funciona o CSS.

Objetivo: Aprender em detalhes como seletores CSS funcionam.

O básico

No ultimo artigo nós vimos terminologia e sintaxe CSS em detalhes. Para recapitular, os seletores são parte de uma regra de CSS e vêm logo antes dos blocos de declaração CSS.

Diferentes tipos de Seletores

Seletores podem ser divididos nas seguintes categorias:

  • Seletores Simples: Case um ou mais elementos baseado no tipo de elemento, class, ou id.
  • Seletores de Atributos: Case um ou mais elementos baseado nos seus valores de atributos/atributo.
  • Pseudo-classes: Corresponde a um ou mais elementos que existem em um determinado estado, como um elemento que está sendo passado pelo ponteiro do mouse ou uma caixa de seleção atualmente desabilitada ou marcada, ou um elemento que é o primeiro filho de seu pai na árvore DOM.
  • Pseudo-elementos: Corresponder uma ou mais partes do conteúdo que estão em uma determinada posição em relação a um elemento, por exemplo, a primeira palavra de cada parágrafo ou conteúdo gerado antes de um elemento.
  • Combinadores: Esses não são exatamente os próprios seletores, mas maneiras de combinar dois ou mais seletores de maneiras úteis para seleções muito específicas. Por exemplo, você pode selecionar apenas parágrafos que são descendentes diretos de divs ou parágrafos que vêm diretamente após os títulos.
  • Multiplos seletores: Novamente, estes não são seletores separados; A idéia é que você pode colocar vários seletores na mesma regra CSS, separados por vírgulas, para aplicar um único conjunto de declarações a todos os elementos selecionados por esses seletores.

Visão geral do artigo de seletores

Os próximos quatro artigos exploram diferentes aspectos dos seletores — nós quebramos essa informação porque há muita coisa sobre ela, e queríamos torná-la menos intimidante e dar-lhe alguns pontos claros para fazer pausas no meio do aprendizado. Os artigos são os seguintes:

Recomenda-se enfaticamente que você escolha primeiro os seletores simples, no caso de você perder alguma informação pertinente.

Etiquetas do documento e colaboradores

Colaboradores desta página: greysonf, davilmaster, gabrielaraujo9001, agathasilva28
Última atualização por: greysonf,