diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/ca/web/css/_colon_checked | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/ca/web/css/_colon_checked')
| -rw-r--r-- | files/ca/web/css/_colon_checked/index.html | 252 |
1 files changed, 0 insertions, 252 deletions
diff --git a/files/ca/web/css/_colon_checked/index.html b/files/ca/web/css/_colon_checked/index.html deleted file mode 100644 index 38742f29ac..0000000000 --- a/files/ca/web/css/_colon_checked/index.html +++ /dev/null @@ -1,252 +0,0 @@ ---- -title: ':checked' -slug: 'Web/CSS/:checked' -tags: - - CSS - - Layout - - Pseudo-class - - Reference - - Web -translation_of: 'Web/CSS/:checked' ---- -<div>{{CSSRef}}</div> - -<p>La <a href="https://developer.mozilla.org/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <strong><code>:checked</code></strong> representa qualsevol <strong>radio </strong>(<code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>), <strong>checkbox </strong>(<code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>) o <strong>option</strong> ({{HTMLElement("option")}} en un element {{HTMLElement("select")}}) que està marcat o commutat a un estat on (activat).</p> - -<pre class="brush: css no-line-numbers">/* Matches any checked/selected radio, checkbox, or option */ -:checked { - margin-left: 25px; - border: 1px solid blue; -} -</pre> - -<p>L'usuari pot activar aquest estat marcant/seleccionant un element o desactivar-ho desmarcant/deseleccionant l'element.</p> - -<div class="note"> -<p><strong>Nota:</strong> Com que els navegadors sovint tracten <code><option></code>s com a <a href="/en-US/docs/Web/CSS/Replaced_element">elements reemplaçats</a>, el grau en què poden ser dissenyats amb la pseudo-class <code>:checked</code> varia d'un navegador a un altre.</p> -</div> - -<h2 id="Syntax" name="Syntax">Sintaxi</h2> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">Exemples</h2> - -<h3 id="Basic_example">Basic example</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><div> - <input type="radio" name="my-input" id="yes"> - <label for="yes">Yes</label> - - <input type="radio" name="my-input" id="no"> - <label for="yes">No</label> -</div> - -<div> - <input type="checkbox" name="my-checkbox" id="opt-in"> - <label for="opt-in">Check me!</label> -</div> - -<select name="my-select" id="fruit"> - <option value="opt1">Apples</option> - <option value="opt2">Grapes</option> - <option value="opt3">Pears</option> -</select> -</pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">div, -select { - margin: 8px; -} - -/* Labels for checked inputs */ -input:checked + label { - color: red; -} - -/* Radio element, when checked */ -input[type="radio"]:checked { - box-shadow: 0 0 0 3px orange; -} - -/* Checkbox element, when checked */ -input[type="checkbox"]:checked { - box-shadow: 0 0 0 3px hotpink; -} - -/* Option elements, when selected */ -option:checked { - box-shadow: 0 0 0 3px lime; - color: red; -} -</pre> - -<h4 id="Resultat">Resultat</h4> - -<p>{{EmbedLiveSample("Basic_example")}}</p> - -<h3 id="Alternar_elements_amb_una_casella_de_selecció_oculta">Alternar elements amb una casella de selecció oculta</h3> - -<p>En aquest exemple s'utilitza la pseudo-class <code>:checked</code> per permetre a l'usuari que alterni el contingut en funció de l'estat d'una casella de selecció (checkbox), tot sense utilitzar <a href="/en-US/docs/Web/JavaScript">JavaScript</a>.</p> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html"><input type="checkbox" id="expand-toggle" /> - -<table> - <thead> - <tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr> - </thead> - <tbody> - <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more 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>[more text]</td><td>[more text]</td><td>[more text]</td></tr> - <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> - </tbody> -</table> - -<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label> -</pre> - -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css">/* Oculta la casella de selecció (checkbox) */ -#expand-toggle { - display: none; -} - -/* Oculta el contingut expandible per defecte */ -.expandable { - visibility: collapse; - background: #ddd; -} - -/* Estil del botó */ -#expand-btn { - display: inline-block; - margin-top: 12px; - padding: 5px 11px; - background-color: #ff7; - border: 1px solid; - border-radius: 3px; -} - -/* <span id="result_box" lang="ca"><span>Mostra el contingut ocult quan es marca la casella de selecció</span></span> */ -#expand-toggle:checked ~ * .expandable { - visibility: visible; -} - -/* Estil del botó quan està marcada la casella de selecció */ -#expand-toggle:checked ~ #expand-btn { - background-color: #ccc; -}</pre> - -<h4 id="Resultat_2">Resultat</h4> - -<p>{{EmbedLiveSample("Toggling_elements_with_a_hidden_checkbox", "auto", 220)}}</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"><span id="result_box" lang="ca"><span>Galeria d'imatges</span></span></h3> - -<p>Podeu utilitzar la pseudo-class <code>:checked</code> per construir una galeria d'imatges amb imatges de grandària completa que només es mostrin quan l'usuari faci clic a una miniatura. Vegeu <a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">aquesta demostració</a> com un possible exemple.</p> - -<div class="note"><strong>Nota:</strong> Per a un efecte anàleg, però basat en la pseudo-classe <a class="internal" href="/en-US/docs/CSS/:hover" title="CSS/:hover"><code>:hover</code></a> i sense caixes de ràdio (radioboxes) ocultes, vegeu <a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">aquesta demostració,</a> presa de la pàgina de referència <a class="internal" href="/en-US/docs/CSS/:hover" title="CSS/:hover">:hover</a>.</div> - -<h2 id="Specifications" name="Specifications">Especificacions</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificació</th> - <th scope="col">Estat</th> - <th scope="col">Comentari</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('HTML WHATWG', '#selector-checked', ':checked') }}</td> - <td>{{ Spec2('HTML WHATWG') }}</td> - <td>Sense canvis.</td> - </tr> - <tr> - <td>{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}</td> - <td>{{ Spec2('HTML5 W3C') }}</td> - <td><span class="short_text" id="result_box" lang="ca"><span>Defineix</span> <span>la semàntica</span> <span>respecte</span> <span>HTML</span><span>.</span></span></td> - </tr> - <tr> - <td>{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}</td> - <td>{{ Spec2('CSS4 Selectors') }}</td> - <td>Sense canvis.</td> - </tr> - <tr> - <td>{{ SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked') }}</td> - <td>{{ Spec2('CSS3 Basic UI') }}</td> - <td>Enllaç a Selectors Level 3.</td> - </tr> - <tr> - <td>{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}</td> - <td>{{ Spec2('CSS3 Selectors') }}</td> - <td><span id="result_box" lang="ca"><span>Defineix</span> <span>la</span> <span>pseudo</span><span>-</span><span>classe,</span> <span>però no</span> <span>la semàntica</span> <span>associada</span></span></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Navegadors compatibles</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Descripció</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Suport bàsic</td> - <td>1.0</td> - <td>{{CompatVersionUnknown}}</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>Descripció</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suport bàsic</td> - <td>2.1</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoMobile(1.0) }}</td> - <td>9.0</td> - <td>9.5</td> - <td>3.1</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> |
