diff options
Diffstat (limited to 'files/ca/web/css/attribute_selectors')
| -rw-r--r-- | files/ca/web/css/attribute_selectors/index.html | 251 |
1 files changed, 0 insertions, 251 deletions
diff --git a/files/ca/web/css/attribute_selectors/index.html b/files/ca/web/css/attribute_selectors/index.html deleted file mode 100644 index 2878bc2507..0000000000 --- a/files/ca/web/css/attribute_selectors/index.html +++ /dev/null @@ -1,251 +0,0 @@ ---- -title: Selector Atribut -slug: Web/CSS/Attribute_selectors -tags: - - Beginner - - CSS - - Reference - - Selectors -translation_of: Web/CSS/Attribute_selectors -original_slug: Web/CSS/Selectors_d'Atribut ---- -<div>{{CSSRef}}</div> - -<p>El <strong>selector attribute</strong> CSS<strong> </strong> <span id="result_box" lang="ca"><span>coincideix amb elements basats en la presència o el valor d'un atribut donat.</span></span></p> - -<pre class="brush: css no-line-numbers">/* <a> elements amb l'atribut title */ -a[title] { - color: purple; -} - -/* elements <a> <span class="short_text" id="result_box" lang="ca"><span>amb una coincidència</span></span> href "https://example.org" */ -a[href="https://example.org"] { - color: green; -} - -/* elements <a> amb un href contenint "example" */ -a[href*="example"] { - font-size: 2em; -} - -/* elements <a> amb un href amb una terminació ".org" */ -a[href$=".org"] { - font-style: italic; -}</pre> - -<dl> - <dt><code>[<em>attr</em>]</code></dt> - <dd>Representa un element amb un nom d'atribut <em>attr</em>.</dd> - <dt><code>[<em>attr</em>=<em>value</em>]</code></dt> - <dd>Representa un element amb un nom d'atribut <em>attr</em> el valor del qual és exactament <em>value</em>.</dd> - <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt> - <dd>Representa un element amb un nom d'atribut <em>attr</em> el valor del qual és una llista de paraules separades per espais en blanc, una de les quals és exactament <em>value</em>.</dd> - <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt> - <dd>Representa un element amb un nom d'atribut <em>attr</em> el valor del qual pot ser exactament <em>value</em> o pot començar amb <em>value</em> immediatament seguit d'un guió, <code>-</code> (U+002D). Sovint s'utilitza per coincidències de subcodis de llenguatge.</dd> - <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt> - <dd>Representa un element amb un nom d'atribut <em>attr</em> el valor del qual està prefixat (precedit) per <em>value</em>.</dd> - <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt> - <dd>Representa un element amb un nom d'atribut <em>attr</em> el valor del qual és sufix (següit) per <em>value</em>.</dd> - <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt> - <dd>Representa un element amb un nom d'atribut <em>attr</em> el valor del qual conté almenys una ocurrència <em>value</em> dins de la cadena.</dd> - <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt> - <dd>En afegir una <code>i</code> (o <code>I</code>) abans del claudàtor de tancament, el valor es compara entre majúscules i minúscules (per a caràcters dins del rang ASCII).</dd> -</dl> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Links">Links</h3> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">a { - color: blue; -} - -/* Internal links, beginning with "#" */ -a[href^="#"] { - background-color: gold; -} - -/* Links with "example" anywhere in the URL */ -a[href*="example"] { - background-color: silver; -} - -/* Links with "insensitive" anywhere in the URL, - regardless of capitalization */ -a[href*="insensitive" i] { - color: cyan; -} - -/* Links that end in ".org" */ -a[href$=".org"] { - color: red; -} -</pre> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><ul> - <li><a href="#internal">Internal link</a></li> - <li><a href="http://example.com">Example link</a></li> - <li><a href="#InSensitive">Insensitive internal link</a></li> - <li><a href="http://example.org">Example org link</a></li> -</ul></pre> - -<h4 id="Resultat">Resultat</h4> - -<p>{{EmbedLiveSample('Links')}}</p> - -<h3 id="Llengües"><span class="short_text" id="result_box" lang="ca"><span>Llengües</span></span></h3> - -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css">/* Tots els divs amb un atribut `lang` són en negreta. */ -div[lang] { - font-weight: bold; -} - -/* Tots els divs en US Anglès són blaus. */ -div[lang~="en-us"] { - color: blue; -} - -/* Tots els divs en Portuguès són verds. */ -div[lang="pt"] { - color: green; -} - -/* Tots els divs en Xinès són vermells, ja sigui - simplificat (zh-CN) o tradicional (zh-TW). */ -div[lang|="zh"] { - color: red; -} - -/* Tots els divs en Xinès Traditional - `data-lang` són porpra */ -/* Nota: T<span id="result_box" lang="ca"><span>ambé podeu utilitzar atributs amb guions sense cometes dobles</span></span> */ -div[data-lang="zh-TW"] { - color: purple; -} -</pre> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html"><div lang="en-us en-gb en-au en-nz">Hello World!</div> -<div lang="pt">Olá Mundo!</div> -<div lang="zh-CN">世界您好！</div> -<div lang="zh-TW">世界您好！</div> -<div data-lang="zh-TW">?世界您好！</div> -</pre> - -<h4 id="Resultat_2">Resultat</h4> - -<p>{{EmbedLiveSample('Languages')}}</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', '#attribute-selectors', 'attribute selectors')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>Afegit modificador per a la selecció del valor d'atribut ASCII sense distinció de majúscules i minúscules.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}</td> - <td>{{Spec2('CSS2.1')}}</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>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1")}}</td> - <td>7</td> - <td>9</td> - <td>3</td> - </tr> - <tr> - <td>Modificador sense distinció de majúscules i minúscules</td> - <td>{{CompatChrome(49.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop("47.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOpera(36)}}</td> - <td>{{CompatSafari(9)}}</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>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Suport bàsic</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Modificador sense distinció de majúscules i minúscules</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(49.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile("47.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatSafari(9)}}</td> - <td>{{CompatChrome(49.0)}}</td> - </tr> - </tbody> -</table> -</div> |