diff options
Diffstat (limited to 'files/pt-br/web/css/seletor_universal/index.html')
-rw-r--r-- | files/pt-br/web/css/seletor_universal/index.html | 105 |
1 files changed, 105 insertions, 0 deletions
diff --git a/files/pt-br/web/css/seletor_universal/index.html b/files/pt-br/web/css/seletor_universal/index.html new file mode 100644 index 0000000000..15e64a08ca --- /dev/null +++ b/files/pt-br/web/css/seletor_universal/index.html @@ -0,0 +1,105 @@ +--- +title: Seletor universal +slug: Web/CSS/Seletor_universal +tags: + - CSS + - Referências + - Seletores +translation_of: Web/CSS/Universal_selectors +--- +<div>{{CSSRef}}</div> + +<p>O <strong>seletor universal</strong> do CSS (<code>*</code>) aplica estilos a elementos de qualquer tipo.</p> + +<pre class="brush: css no-line-numbers">/* Seleciona todos os elementos */ +* { + color: green; +}</pre> + +<p>A partir do CSS3, o asterisco pode ser combinado com {{cssxref("CSS_Namespaces", "namespaces")}}:</p> + +<ul> + <li><code>ns|*</code> - aplica a todos os elementos no namespace <em>ns</em></li> + <li><code>*|*</code> - aplica a todos elementos</li> + <li><code>|*</code> - aplica a todos os elementos que não tem namespaces declarados</li> +</ul> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">* { <em>propriedades de estilo</em> }</pre> + +<p>O asterisco é opcional para seletores simples. Por exemplo, <code>*.atencao</code> e <code>.atencao</code> são equivalentes.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">* [lang^=pt] { + color: green; +} + +*.atencao { + color: red; +} + +*#conteudoprincipal { + border: 1px solid blue; +} + +.flutuando { + float: left +} + +/* automaticamente aplica clear ao próximo irmão após o elemento com a classe .flutuando */ +.flutuando + * { + clear: left; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p class="atencao"> + <span lang="pt-br">Um span verde</span> em um parágrafo vermelho. +</p> +<p id="conteudoprincipal" lang="pt-pt"> + <span class="atencao">Um span vermelho</span> em um parágrafo verde. +</p></pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Exemplos')}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#the-universal-selector', 'Seletor universal')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Sem mudanças</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#universal-selector', 'Seletor universal')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Define o comportamente de acordo com os namespaces e adiciona uma sugestão de que é possivel omitir o seletor em pseudo-elementos</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#universal-selector', 'Seletor universal')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_Browsers">Compatibilidade dos Browsers</h2> + +<div class="hidden">A tabela de compatibilidade nessa página é gerada a partir de dados estruturados. Se você gostaria de contribuir com esses dados, favor checar aqui <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos enviar um pull request.</div> + +<p>{{Compat("css.selectors.universal")}}</p> |