diff options
Diffstat (limited to 'files/ca/web/css/_colon_focus-within/index.html')
| -rw-r--r-- | files/ca/web/css/_colon_focus-within/index.html | 146 |
1 files changed, 0 insertions, 146 deletions
diff --git a/files/ca/web/css/_colon_focus-within/index.html b/files/ca/web/css/_colon_focus-within/index.html deleted file mode 100644 index 72d95e88e6..0000000000 --- a/files/ca/web/css/_colon_focus-within/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: ':focus-within' -slug: 'Web/CSS/:focus-within' -tags: - - CSS - - Layout - - Pseudo-class - - Reference - - Web -translation_of: 'Web/CSS/:focus-within' ---- -<div>{{CSSRef}}</div> - -<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:focus-within</code></strong> representa un element que ha rebut focus o <em>conté</em> un element que ha rebut focus. En altres paraules, representa un element que està aparellat amb la pseudo-class {{cssxref(":focus")}} o té un descendent que està aparellat amb <code>:focus</code>. (Això inclou descendents en <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">arbres d'ombres</a>.)</p> - -<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Selecciona un <div> quan un dels seus descendents està enfocat</span></span> */ -div:focus-within { - background: cyan; -}</pre> - -<p>Aquest selector és útil, per fer un exemple comú, per a ressaltar un contenidor complet {{htmlElement("form")}} quan l'usuari se centra en un dels seus camps {{htmlElement("input")}}.</p> - -<h2 id="Sintaxi">Sintaxi</h2> - -{{csssyntax}} - -<h2 id="Exemple">Exemple</h2> - -<p>En aquest exemple, el formulari rebrà estils de color especials quan l'entrada de text rep el focus.</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p>Try typing into this form.</p> - -<form> - <label for="given_name">Given Name:</label> - <input id="given_name" type="text"> - <br> - <label for="family_name">Family Name:</label> - <input id="family_name" type="text"> -</form></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">form { - border: 1px solid; - color: gray; - padding: 4px; -} - -form:focus-within { - background: #ff8; - color: black; -} - -input { - margin: 4px; -} -</pre> - -<h3 id="Resultat">Resultat</h3> - -<p>{{EmbedLiveSample("Example", 500, 150)}}</p> - -<h2 id="Especificacions">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("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}</td> - <td>{{Spec2("CSS4 Selectors")}}</td> - <td>Definició inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Navegadors_compatibles">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>{{CompatChrome("60")}}</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatOpera("47")}}</td> - <td>10.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Descripció</th> - <th>Android Webview</th> - <th>Chrome for Android</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>{{CompatChrome("60")}}</td> - <td>{{CompatChrome("60")}}</td> - <td>{{CompatGeckoMobile("52.0")}}<sup>[2]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatOpera("47")}}</td> - <td>10.3</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Aquesta característica encara no està implementada. Consulteu la <a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/11725071-implement-focus-within-from-selectors-4">sol·licitud de millora relacionada</a>.</p> - -<p>[2] Aquesta característica es va implementar al {{bug("1176997")}}.</p> - -<h2 id="Vegeu_també">Vegeu també</h2> - -<ul> - <li>{{cssxref(":focus")}}</li> -</ul> |