diff options
Diffstat (limited to 'files/ca/web/css/_colon_is/index.html')
| -rw-r--r-- | files/ca/web/css/_colon_is/index.html | 198 |
1 files changed, 198 insertions, 0 deletions
diff --git a/files/ca/web/css/_colon_is/index.html b/files/ca/web/css/_colon_is/index.html new file mode 100644 index 0000000000..6669bc645a --- /dev/null +++ b/files/ca/web/css/_colon_is/index.html @@ -0,0 +1,198 @@ +--- +title: ':any' +slug: 'Web/CSS/:any' +tags: + - CSS + - Experimental + - Pseudo-class + - Reference +translation_of: 'Web/CSS/:is' +translation_of_original: 'Web/CSS/:any' +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La <a href="/en-US/docs/CSS/Pseudo-classes" title="CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:any()</code></strong> permet crear un selector que contingui múltiples opcions, algun dels quals seran aparellats. Aquesta és una alternativa més senzilla que repetir un selector sencer diverses vegades perquè un element dins d'ell varia.</p> + +<pre class="brush: css no-line-numbers">/* Select any h2 inside a section, article, aside, or nav */ +/* Currently supported with -moz- and -webkit- prefixes */ +:-moz-any(section, article, aside, nav) h2 { + font-size: 4.5rem; +} + +:-webkit-any(section, article, aside, nav) h2 { + font-size: 4.5rem; +} +</pre> + +<div class="note"><strong>Nota : </strong>Aquesta pseudo-classe està en curs de ser estandarditzada en <em><a href="http://dev.w3.org/csswg/selectors4/#matches">CSS Selectors Level 4</a></em> sota el nom <code>:matches()</code>. És probable que la sintaxi i el nom de <em><code>:-vendor-any()</code></em> seran canviats perquè es reflecteixi en un futur proper.</div> + +<h2 id="Syntax" name="Syntax">Sintaxi</h2> + +<h3 id="Examples" name="Examples">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h3 id="Values" name="Values">Valors</h3> + +<dl> + <dt><code>selector</code></dt> + <dd>Un selector. Això pot ser un selector simple o un selector múltiple compost de <a href="http://www.w3.org/TR/css3-selectors/#simple-selectors">selectors simples CSS 3</a> i pot incloure el combinador descendent.</dd> +</dl> + +<div class="note"><strong>Nota:</strong> Els selectors <strong>no</strong> poden contenir pseudo-elements i l'únic combinador permès és el combinador descendent.</div> + +<h2 id="Examples" name="Examples">Exemples</h2> + +<p><span class="short_text" id="result_box" lang="ca"><span>Per</span> <span>exemple</span><span>, el següent</span> <span>CSS</span></span>:</p> + +<pre class="brush: css">/* 3 deep (or more) unordered lists use a square */ +ol ol ul, ol ul ul, ol menu ul, ol dir ul, +ol ol menu, ol ul menu, ol menu menu, ol dir menu, +ol ol dir, ol ul dir, ol menu dir, ol dir dir, +ul ol ul, ul ul ul, ul menu ul, ul dir ul, +ul ol menu, ul ul menu, ul menu menu, ul dir menu, +ul ol dir, ul ul dir, ul menu dir, ul dir dir, +menu ol ul, menu ul ul, menu menu ul, menu dir ul, +menu ol menu, menu ul menu, menu menu menu, menu dir menu, +menu ol dir, menu ul dir, menu menu dir, menu dir dir, +dir ol ul, dir ul ul, dir menu ul, dir dir ul, +dir ol menu, dir ul menu, dir menu menu, dir dir menu, +dir ol dir, dir ul dir, dir menu dir, dir dir dir { + list-style-type: square; +} +</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>Pot</span> <span>substituir-se per</span></span>:</p> + +<pre class="brush: css">/* 3 deep (or more) unordered lists use a square */ +:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul, +:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu, +:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir { + list-style-type: square; +}</pre> + +<p>No obstant això, no utilitzeu el següent: (Veure <a href="#Issues_with_performance_and_specificity">la secció sobre el rendiment </a>més endavant.)</p> + +<pre class="brush: css">:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) { + list-style-type: square; +}</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Aquesta propietat és particularment útil quan es tracta de<a href="https://developer.mozilla.org/en-US/docs/Sections_and_Outlines_of_an_HTML5_document"> seccions i encapçalaments</a> en HTML5. Des {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}} es poden niar, sense <code>:any()</code> , l'estil d'aquests perquè coincideixin entre si pot ser difícil.</p> + +<p>Per exemple, sense <code>:any()</code>, donar estil a tot els elements {{HTMLElement("h1")}} a diferents profunditats podria ser molt complicat:</p> + +<pre class="brush: css">/* Level 0 */ +h1 { + font-size: 30px; +} +/* Level 1 */ +section h1, article h1, aside h1, nav h1 { + font-size: 25px; +} +/* Level 2 */ +section section h1, section article h1, section aside h1, section nav h1, +article section h1, article article h1, article aside h1, article nav h1, +aside section h1, aside article h1, aside aside h1, aside nav h1, +nav section h1, nav article h1, nav aside h1, nav nav h1, { + font-size: 20px; +} +/* Level 3 */ +/* ... don't even think about it*/ +</pre> + +<p>Usant <code>:-any()</code>, és molt més fàcil:</p> + +<pre class="brush: css">/* Level 0 */ +h1 { + font-size: 30px; +} +/* Level 1 */ +:-moz-any(section, article, aside, nav) h1 { + font-size: 25px; +} +/* Level 2 */ +:-moz-any(section, article, aside, nav) +:-moz-any(section, article, aside, nav) h1 { + font-size: 20px; +} +/* Level 3 */ +:-moz-any(section, article, aside, nav) +:-moz-any(section, article, aside, nav) +:-moz-any(section, article, aside, nav) h1 { + font-size: 15px; +}</pre> + +<h3 id="Issues_with_performance_and_specificity" name="Issues_with_performance_and_specificity"><span class="short_text" id="result_box" lang="ca"><span>Problemes</span> <span>amb</span> <span>el rendiment</span> <span>i</span> <span>l'especificitat</span></span></h3> + +<p><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=561154" title="https://bugzilla.mozilla.org/show_bug.cgi?id=561154">Bug 561154</a> registra un problema amb Gecko en el qual l'especificitat de: <code>:-moz-any()</code> és incorrecta. La implementació actual (com Firefox 12) posa: <code>:-moz-any()</code> en la categoria de regles universals, la qual cosa significa que usar-ho com el selector dret serà més lent que usar un ID, una classe o una etiqueta com el selector dret.</p> + +<p>Per exemple:</p> + +<pre class="brush: css">.a > :-moz-any(.b, .c) +</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>és</span> <span>més</span> <span>lent que</span><span>:</span></span></p> + +<pre class="brush: css">.a > .b, .a > .c +</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>i</span> <span>el següent és</span> més <span>ràpid</span><span>:</span></span></p> + +<pre class="brush: css">:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c +</pre> + +<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>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}</td> + <td>12.0 (534.30){{property_prefix("-webkit")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>5<br> + {{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>5<br> + {{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> |