O que o seletor * * CSS faz?

97

Recentemente me deparei * *com CSS .

Referência do site - Link do site .

Para um único *uso na folha de estilo CSS, Internet e Stack Overflow são inundados com exemplos, mas não tenho certeza sobre o uso de dois * *símbolos em CSS.

Pesquisei no Google, mas não consegui encontrar nenhuma informação relevante sobre isso, pois um único *seleciona todos os elementos, mas não tenho certeza por que o site usou duas vezes. Qual é a parte que falta para isso e por que este hack é usado (se for um hack)?

swapnesh
fonte

Respostas:

138

Assim como qualquer outra vez que você colocar dois seletores um após o outro (por exemplo li a), você obterá o combinador descendente. O mesmo * *ocorre com qualquer elemento descendente de qualquer outro elemento - em outras palavras, qualquer elemento que não seja o elemento raiz de todo o documento.

hobbs
fonte
obrigado pela resposta ... isso é o que eu estava pensando, mas não tenho certeza, então pensei em perguntar da comunidade ... aceitarei em breve +1
swapnesh
1
Só mais uma pergunta - é realmente relevante usar * *? como se eu entendesse o conceito, mas não em termos práticos :(
swapnesh
2
@swapnesh parece um hack do navegador. Existe uma * { font-size: XXX }regra e uma * * { font-size: YYY }regra. Um deles se aplica à maioria dos navegadores e o outro se aplica a navegadores com um determinado bug, embora eu não tenha paciência para descobrir os detalhes. É semelhante ao * htmlhack que costumava ser usado para detectar o IE antigo.
hobbs,
obrigado por adicionar o último bloco detalhado nos comentários ... é quase perfeito ... não há necessidade de fazer mais brainstorming para isso :) muito
obrigado
10
Note-se que na forma de * html, * * vai coincidir com o elemento html no IE6.
Alohci,
80

Apenas um pequeno grande exemplo:

Tente adicionar isso em seu site:

* { outline: 2px dotted red; }
* * { outline: 2px dotted green; }
* * * { outline: 2px dotted orange; }
* * * * { outline: 2px dotted blue; }
* * * * * { outline: 1px solid red; }
* * * * * * { outline: 1px solid green; }
* * * * * * * { outline: 1px solid orange; }
* * * * * * * * { outline: 1px solid blue; }

Demo: http://jsfiddle.net/l2aelba/sFSad/


Exemplo 2:

O que o seletor * * CSS faz?

Demo: http://jsfiddle.net/l2aelba/sFSad/34/

l2aelba
fonte
7
Esta não é exatamente a resposta, mas que bela visualização!
aboy021
1
@ l2aelba realmente uma bela explicação :) +1
swapnesh
33

* *Corresponde a tudo, exceto o elemento de nível superior, por exemplo html,.

Frambot
fonte
Obrigado Joe, testei aqui e também de acordo com os comentários acima: o * *seletor é equivalente a html *para todos os navegadores exceto o bom e velho IE6 :-)
Stano
@Stano * *é equivalente a html *... para um arquivo HTML. Mas CSS pode ser usado para estilizar outros tipos de documentos (principalmente SVG).
Sylvain Leroux
11

* significa aplicar determinados estilos a todos os elementos.

* *significa aplicar os estilos fornecidos a todos os elementos filho do elemento. Exemplo:

body > * {
  margin: 0;
}

Isso aplica estilos de margem a todos os elementos filho do corpo. Da mesma forma,

* * {
  margin: 0;
}

aplica margin: 0- se aos *elementos filhos de. Resumindo, isso se aplica margin: 0a quase todos os elementos.

Geralmente, um *é o suficiente. Não há necessidade de dois * *.

CrazyFellow
fonte
2
obrigado pela explicação +1 .. embora eu não tenha certeza do que você acabou de mencionar na última linha "Geralmente, * é o suficiente. Não há necessidade de * *. Eu acho."
swapnesh de
3
* *aplica estilos a elementos descendentes , não a elementos filhos. Os elementos filhos seriam >como em seu exemplo, não o espaço. Descendente e filho não são a mesma coisa.
BoltClock
7

Isso seleciona todos os elementos aninhados dentro de outro elemento da mesma maneira div aque selecionaria todos os <a>elementos aninhados em algum lugar dentro de um <div>elemento.

Mike Brant
fonte