diff options
Diffstat (limited to 'files/pt-br/web/css/_colon_checked/index.html')
| -rw-r--r-- | files/pt-br/web/css/_colon_checked/index.html | 239 |
1 files changed, 239 insertions, 0 deletions
diff --git a/files/pt-br/web/css/_colon_checked/index.html b/files/pt-br/web/css/_colon_checked/index.html new file mode 100644 index 0000000000..17954e5a20 --- /dev/null +++ b/files/pt-br/web/css/_colon_checked/index.html @@ -0,0 +1,239 @@ +--- +title: ':checked' +slug: 'Web/CSS/:checked' +tags: + - ':checked' + - CSS + - CSS Pseudo-classe + - Layout + - Referencia + - Web +translation_of: 'Web/CSS/:checked' +--- +<div>{{CSSRef}}</div> + +<p>A <a href="/pt-BR/docs/Web/CSS/Pseudo-classes">pseudo-classe </a><strong><code>:checked</code></strong> de um seletor CSS representa um elemento <strong>radio </strong>(<code><input type="radio"></code>), <strong>checkbox </strong>(<code><input type="checkbox"></code>) ou <strong>option</strong> ({{ HTMLElement("option") }} em um {{ HTMLElement("select") }}) que está marcada ou alternado para um estado ligado. O usuário pode mudar seu estado clicando no elemento, ou selecionando um valor diferente, nesse caso a pseudo-classe <strong>:checked</strong> não se aplica a esse elemento, mas vai para um elemento relevante.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="brush: css">input:checked { + margin-left: 25px; + border: 1px solid blue; +} +</pre> + +<h3 id="Examples" name="Examples">Sintaxe formal</h3> + +<pre class="syntaxbox">elemento:checked { estilos de propriedades }</pre> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<h3 id="Example_selectors" name="Example_selectors">Exemplo de seletores</h3> + +<pre class="brush: css">/* qualquer elemento "checkable" */ +:checked { + width: 50px; + height: 50px; +} + +/* qualquer elemento radio */ +input[type="radio"]:checked { + margin-left: 25px; +} + +/* apenas elementos checkbox */ +input[type="checkbox"]:checked { + display: none; +} + +/* apenas elementos option */ +option:checked { + color: red; +} +</pre> + +<dl> + <dt><code>input[type="radio"]:checked</code></dt> + <dd>Representa todos os botões de rádio na página que estão ativos</dd> +</dl> + +<dl> + <dt><code>input[type="checkbox"]:checked</code></dt> + <dd>Representa todos os checkboxes na página que estão ativos</dd> + <dt><code>option:checked</code></dt> + <dd>Representa todos os selects na página que estão selecionados</dd> +</dl> + +<h3 id="Usando_checkboxes_escodindos_para_amarzenar_algum_valor_booleano.">Usando checkboxes escodindos para amarzenar algum valor <span class="st">booleano</span>.</h3> + +<p>A pseudo-classe <code>:checked </code>aplicada em checkboxes escondidos, adicionado ao início de sua página pode<br> + ser aplicada de forma a armazenar algum booleano dinâmico para ser usado por uma regra CSS. O exemplo a seguir mostra como exibir/esconder um elemento expansível com um simples clique em um botão (<a class="internal" href="/@api/deki/files/6246/=expandable-elements.html" title="Expandable elements through the :checked pseudoclass">download esse demo</a>).</p> + +<pre class="brush: html"><!doctype html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>Elementos expansíveis</title> +<style type="text/css"> +#expand-btn { + margin: 0 3px; + display: inline-block; + font: 12px / 13px "Lucida Grande", sans-serif; + text-shadow: rgba(255, 255, 255, 0.4) 0 1px; + padding: 3px 6px; + border: 1px solid rgba(0, 0, 0, 0.6); + background-color: #969696; + cursor: default; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white; + -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white; + box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white; +} + +#isexpanded:checked ~ #expand-btn, #isexpanded:checked ~ * #expand-btn { + background: #B5B5B5; + -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px; + -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px; + box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px; +} + +#isexpanded, .expandable { + display: none; +} + +#isexpanded:checked ~ * tr.expandable { + display: table-row; + background: #cccccc; + +} + +#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable { + display: block; + background: #cccccc; +} +</style> +</head> +<body> + +<input type="checkbox" id="isexpanded" /> + +<h1>Elementos expansíveis</h1> +<table> + <thead> + <tr><th>Coluna #1</th><th>Coluna #2</th><th>Coluna #3</th></tr> + </thead> + <tbody> + <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> + <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> + <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> + <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> + <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> + </tbody> +</table> + +<p>[some sample text]</p> +<p><label for="isexpanded" id="expand-btn">Mostra ou esconder elemntos</label></p> +<p class="expandable">[outra amostra de texto]</p> +<p>[alguma amostra de texto]</p> +</body> +</html> +</pre> + +<p>{{ EmbedLiveSample('Usando_checkboxes_escodindos_para_amarzenar_algum_valor_booleano', '', '', '', 'Web/CSS/:checked') }}</p> + +<h3 id="Using_hidden_radioboxes_in_order_to_store_some_CSS_boolean_values" name="Using_hidden_radioboxes_in_order_to_store_some_CSS_boolean_values">Usando radioboxes escondidos para armazenar algum valor CSS booleano</h3> + +<p>Você também pode usar a pseudo-classe <code>:checked </code>aplicada a um radioboxe escondido afim de construir, por exemplo, uma <strong>galeria de imagem onde as imagens apenas sejam exibidas no tamanho cheio com o clique do mouse em visualizar. </strong>Veja <a href="/@api/deki/files/6268/=css-checked-gallery.zip">essa demonstração</a> como uma dica.</p> + +<div class="note"><strong>Nota: </strong>Para um efeito análogo, mas baseada na pseudo-classe <a class="internal" href="/pt-BR/docs/Web/CSS/%3Ahover" title="CSS/:hover"><code>:hover</code></a><code> </code>sem radioboxes escondidos, veja <a href="/@api/deki/files/6247/=css-gallery.zip">essa demostração</a>, tomadas a partir de uma página <a class="internal" href="/pt-BR/docs/Web/CSS/%3Ahover" title="CSS/:hover"><code>:hover</code></a><code>.</code></div> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Estatus</th> + <th scope="col">Comentários</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', '#selector-checked', ':checked') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Sem mudanças.</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td>Define a semântica sobre o HTML.</td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Sem mudanças.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked') }}</td> + <td>{{ Spec2('CSS3 Basic UI') }}</td> + <td>Link para Seletores nível 3</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Define a pseudo-classe, mas não <span class="short_text" id="result_box" lang="pt"><span class="hps">associação</span> <span class="hps">semântica</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop(1.0) }}</td> + <td>9.0</td> + <td>9.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>2.1</td> + <td>{{ CompatGeckoMobile(1.0) }}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> |