você está aqui: Home  → Arquivo de Mensagens

Introdução aos seletores CSS

Colaboração: Maurício (Maujor) Samy Silva

Data de Publicação: 26 de setembro de 2017

Definições

Seletor

É uma estrutura condicional destinada a selecionar um ou mais elementos da árvore do documento.

Diz-se que um seletor CSS seleciona um (ou mais) elemento(s) da marcação quando a estrutura condicional resulta, ou casa, ou aponta, para o(s) elemento(s) por ele selecionados. O(s) elemento(s) selecionado(s) é(são) o(s) alvo(s) do seletor.

Seletores CSS são usados para se definir regras CSS a serem aplicadas ao(s) elemento(s) com o(s) qual(is) casam.

Seletor simples

Os seletores simples e seus alvos são listados a seguir:

  • Seletor universal - todos os elementos da marcação.
  • Seletor tipo - determinado elemento da marcação.
  • Seletor ID - elemento da marcação com determinado valor de atributo id.
  • Seletor classe - elemento da marcação selecionado com base no valor do atributo class.
  • Seletor de atributo - elemento da marcação selecionado com base no nome e/ou valor de um atributo.
  • Pseudoclasse - elemento da marcação selecionado com base em informações não contidas explicitamente na árvore do documento.

Seletor composto

O encadeamento de dois ou mais seletores simples separados por elementos de combinação formam um seletor composto.

Elemento de combinação

Elemento de combinação é um sinal gráfico destinado a separar seletores simples com a finalidade de se criar seletores compostos.

Os elementos de combinação de seletores e seus significados listados a seguir:

  • E F (espaço em branco) casa com elemento F que é descendente do elemento E.
  • E > F (sinal >) casa com elemento F que é elemento-filho do elemento E.
  • E + F (sinal +) casa com o único elemento F que se segue a E e é elemento irmão do elemento E.
  • E ~ F (sinal ~) casa com todos os elementos F que são elementos irmãos do elemento E.

Pseudoelemento

Pseudoelementos são adicionados aos seletores e permitem casar com partes do documento não explicitamente contidas na árvore do documento, tais como a primeira letra ou a primeira linha de um parágrafo.

Sintaxe

Um seletor é uma cadeia composta de um ou mais seletores simples separados por elementos de combinação podendo ou não terminar com um pseudoelemento.

Observe a seguir exemplos da sintaxe de seletores CSS para um documento HTML.

Exemplo Explicação
p { ... } seletor simples de parágrafos
div p { ... } seletor composto descendente
#div { ... } seletor ID
.destaque { ... } seletor classe
input[type='password"] { ... }
seletor de atributo
*{ ... } seletor universal
section > div p { ... } seletor composto descendentes de elemento-filho
h2 + p { ... } seletor irmão imediatamente adjacente
h1 ~ p { ... } seletor irmãos em geral
h2:first-letter { ... } pseudoelemento

Sobre o autor

Maurício Samy Silva também conhecido como "Dinossauro das CSS" ou simplesmente Maujor® é graduado em Engenharia Civil pelo Instituto Militar de Engenharia (IME).

No segundo semestre de 2003, com a pretensão de suprir a falta de material de consulta gratuita, em língua portuguesa, na internet, decidiu criar o site de tutoriais denominado Maujor, hospedado em http://www.maujor.com/ e destinado a divulgar as técnicas de desenvolvimento frontend. Maujor é autor de 15 livros de desenvolvimento web (http://livrosdomaujor.com.br) e está escrevendo mais um sobre CSS Grid Layout com previsão de lançamento em novembro de 2017.

Saiba mais: Facebook , Twitter.



Veja a relação completa dos artigos de Maurício (Maujor) Samy Silva

 

 

Opinião dos Leitores

Seja o primeiro a comentar este artigo
*Nome:
Email:
Me notifique sobre novos comentários nessa página
Oculte meu email
*Texto:
 
  Para publicar seu comentário, digite o código contido na imagem acima
 


Powered by Scriptsmill Comments Script