From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/ca/web/css/selectors_d'atribut/index.html | 250 ++++++++++++++++++++++++ 1 file changed, 250 insertions(+) create mode 100644 files/ca/web/css/selectors_d'atribut/index.html (limited to 'files/ca/web/css/selectors_d'atribut') diff --git a/files/ca/web/css/selectors_d'atribut/index.html b/files/ca/web/css/selectors_d'atribut/index.html new file mode 100644 index 0000000000..6778a2b3cb --- /dev/null +++ b/files/ca/web/css/selectors_d'atribut/index.html @@ -0,0 +1,250 @@ +--- +title: Selector Atribut +slug: Web/CSS/Selectors_d'Atribut +tags: + - Beginner + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

El selector attribute CSS coincideix amb elements basats en la presència o el valor d'un atribut donat.

+ +
/* <a> elements amb l'atribut title */
+a[title] {
+  color: purple;
+}
+
+/* elements <a> amb una coincidència 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;
+}
+ +
+
[attr]
+
Representa un element amb un nom d'atribut attr.
+
[attr=value]
+
Representa un element amb un nom d'atribut attr el valor del qual és exactament value.
+
[attr~=value]
+
Representa un element amb un nom d'atribut attr el valor del qual és una llista de paraules separades per espais en blanc, una de les quals és exactament value.
+
[attr|=value]
+
Representa un element amb un nom d'atribut attr el valor del qual pot ser exactament value o pot començar amb value immediatament seguit d'un guió, - (U+002D). Sovint s'utilitza per coincidències de subcodis de llenguatge.
+
[attr^=value]
+
Representa un element amb un nom d'atribut attr el valor del qual està prefixat (precedit) per value.
+
[attr$=value]
+
Representa un element amb un nom d'atribut attr el valor del qual és sufix (següit) per value.
+
[attr*=value]
+
Representa un element amb un nom d'atribut attr el valor del qual conté almenys una ocurrència value dins de la cadena.
+
[attr operator value i]
+
En afegir una i (o I) abans del claudàtor de tancament, el valor es compara entre majúscules i minúscules (per a caràcters dins del rang ASCII).
+
+ +

Exemples

+ + + +

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;
+}
+
+ +

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>
+ +

Resultat

+ +

{{EmbedLiveSample('Links')}}

+ +

Llengües

+ +

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: També podeu utilitzar atributs amb guions sense cometes dobles */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+
+ +

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>
+
+ +

Resultat

+ +

{{EmbedLiveSample('Languages')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Afegit modificador per a la selecció del valor d'atribut ASCII sense distinció de majúscules i minúscules.
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}793
Modificador sense distinció de majúscules i minúscules{{CompatChrome(49.0)}}{{CompatNo}}{{CompatGeckoDesktop("47.0")}}{{CompatUnknown}}{{CompatOpera(36)}}{{CompatSafari(9)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
Modificador sense distinció de majúscules i minúscules{{CompatUnknown}}{{CompatChrome(49.0)}}{{CompatNo}}{{CompatGeckoMobile("47.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatSafari(9)}}{{CompatChrome(49.0)}}
+
-- cgit v1.2.3-54-g00ecf