22

Às vezes pego sites prontos pra editar e percebo que no console aparece:

* {
  /* código aqui */
}

O que significa esse asterisco?

18
  • 5
    seletor universal
    – Marconi
    Commented 2/06/2017 às 12:08
  • 5
    Precisa negativar Leon? Eu perguntei aqui, porque gosto da comunidade, e não vi perguntas relacionadas. Além de me ajudar, ajuda o stackoverflow, com SEO, Google, etc. Muitas outras pessoas não sabem isso. Se não quiser ajudar, não precisa atrapalhar, eu ja fui ajudado, e agora sei o que é. Commented 2/06/2017 às 14:13
  • 4
    @LeonFreire equivocado seu comentário. Leia esse artigo no meta. Perguntas que agregarem conteúdo ao site serão sempre bem-vindas. Commented 6/06/2017 às 16:35
  • 4
    @LeonFreire com o perdão, mas o "procurou exaustivamente" se refere a procurar dentro do site (se clicar no link lá notará que ele vai pro buscador do próprio site), não tinha pergunta especifica sobre o assunto, quero dizer tem até uma resposta minha pt.stackoverflow.com/a/58005/3635, mas não é muito sobre *, é sobre o comportamento de .classe, agregar "conteúdo canônico" em portugues é fundamental para tornar o nosso site uma fonte mais confiável de pesquisa.
    – Syzoth
    Commented 6/06/2017 às 16:53
  • 2
    @LucasCarvalho ele não fez de má fé, e já entendeu, recomendo a você também ler o meta, principalmente sobre o significado de down-votes, claro que tem downvote mal usado, mas dentro do entendimento do Leon, não foi de má fé, como disse, agora é ser paciente e esperar as pessoas absorverem o que é a nossa comunidade ;)
    – Syzoth
    Commented 6/06/2017 às 17:13

1 Resposta 1

29

* é chamado de seletor universal. Esse seletor representa todos os elementos serão afetados pelas definições de estilo ali colocadas.

Por exemplo, eu costumo usar muito pra poder aplicar uma determinada estilização em todos os elementos da página:

* { box-sizing: border-box; }

É claro que deve-se ter cuidado ao usar o asterisco, para não afetar configurações padrões de alguns elementos.

Observe que, no caso específico da sua pergunta, o asterisco sozinho afeta todos os elementos, mas é possível afetar apenas todos elementos que sejam filho de outros.

Exemplo:

p * {
   padding: 10px;
}

Ou seja, tudo que estiver dentro dos <p>, vão ter o padding de 10px.

Além disso, é possível fazer várias outras combinações com o seletor *, mas, em suma, ele sempre representará "todos os elementos".

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .