From cb9e359a51c3249d8f5157db69d43fd413ddeda6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:45:12 +0100 Subject: unslug ca: move --- files/ca/web/css/_colon_any/index.html | 198 ---------------- files/ca/web/css/_colon_is/index.html | 198 ++++++++++++++++ .../web/css/adjacent_sibling_combinator/index.html | 135 +++++++++++ files/ca/web/css/attribute_selectors/index.html | 250 +++++++++++++++++++++ files/ca/web/css/child_combinator/index.html | 135 +++++++++++ files/ca/web/css/class_selectors/index.html | 139 ++++++++++++ .../dominar_el_col.lapse_del_marge/index.html | 89 -------- .../index.html" | 67 ------ .../introduction_to_the_css_box_model/index.html | 67 ++++++ .../mastering_margin_collapsing/index.html | 89 ++++++++ files/ca/web/css/css_selectors/index.html | 156 +++++++++++++ .../index.html | 69 ++++++ files/ca/web/css/descendant_combinator/index.html | 170 ++++++++++++++ .../web/css/general_sibling_combinator/index.html | 129 +++++++++++ files/ca/web/css/id_selectors/index.html | 134 +++++++++++ files/ca/web/css/reference/index.html | 206 +++++++++++++++++ .../ca/web/css/refer\303\251ncia_css/index.html" | 206 ----------------- files/ca/web/css/selectors_css/index.html | 156 ------------- .../index.html | 69 ------ files/ca/web/css/selectors_d'atribut/index.html | 250 --------------------- files/ca/web/css/selectors_de_classe/index.html | 139 ------------ .../ca/web/css/selectors_de_descendents/index.html | 170 -------------- files/ca/web/css/selectors_de_fills/index.html | 135 ----------- .../css/selectors_de_germans_adjacents/index.html | 135 ----------- files/ca/web/css/selectors_de_tipus/index.html | 135 ----------- .../css/selectors_general_de_germans/index.html | 129 ----------- files/ca/web/css/selectors_id/index.html | 134 ----------- files/ca/web/css/selectors_universal/index.html | 176 --------------- files/ca/web/css/sintaxi/index.html | 79 ------- files/ca/web/css/syntax/index.html | 79 +++++++ files/ca/web/css/type_selectors/index.html | 135 +++++++++++ files/ca/web/css/universal_selectors/index.html | 176 +++++++++++++++ 32 files changed, 2267 insertions(+), 2267 deletions(-) delete mode 100644 files/ca/web/css/_colon_any/index.html create mode 100644 files/ca/web/css/_colon_is/index.html create mode 100644 files/ca/web/css/adjacent_sibling_combinator/index.html create mode 100644 files/ca/web/css/attribute_selectors/index.html create mode 100644 files/ca/web/css/child_combinator/index.html create mode 100644 files/ca/web/css/class_selectors/index.html delete mode 100644 files/ca/web/css/css_box_model/dominar_el_col.lapse_del_marge/index.html delete mode 100644 "files/ca/web/css/css_box_model/introducci\303\263_al_model_de_caixa_css/index.html" create mode 100644 files/ca/web/css/css_box_model/introduction_to_the_css_box_model/index.html create mode 100644 files/ca/web/css/css_box_model/mastering_margin_collapsing/index.html create mode 100644 files/ca/web/css/css_selectors/index.html create mode 100644 files/ca/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html create mode 100644 files/ca/web/css/descendant_combinator/index.html create mode 100644 files/ca/web/css/general_sibling_combinator/index.html create mode 100644 files/ca/web/css/id_selectors/index.html create mode 100644 files/ca/web/css/reference/index.html delete mode 100644 "files/ca/web/css/refer\303\251ncia_css/index.html" delete mode 100644 files/ca/web/css/selectors_css/index.html delete mode 100644 files/ca/web/css/selectors_css/using_the__colon_target_pseudo-class_in_selectors/index.html delete mode 100644 files/ca/web/css/selectors_d'atribut/index.html delete mode 100644 files/ca/web/css/selectors_de_classe/index.html delete mode 100644 files/ca/web/css/selectors_de_descendents/index.html delete mode 100644 files/ca/web/css/selectors_de_fills/index.html delete mode 100644 files/ca/web/css/selectors_de_germans_adjacents/index.html delete mode 100644 files/ca/web/css/selectors_de_tipus/index.html delete mode 100644 files/ca/web/css/selectors_general_de_germans/index.html delete mode 100644 files/ca/web/css/selectors_id/index.html delete mode 100644 files/ca/web/css/selectors_universal/index.html delete mode 100644 files/ca/web/css/sintaxi/index.html create mode 100644 files/ca/web/css/syntax/index.html create mode 100644 files/ca/web/css/type_selectors/index.html create mode 100644 files/ca/web/css/universal_selectors/index.html (limited to 'files/ca/web/css') diff --git a/files/ca/web/css/_colon_any/index.html b/files/ca/web/css/_colon_any/index.html deleted file mode 100644 index 6669bc645a..0000000000 --- a/files/ca/web/css/_colon_any/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: ':any' -slug: 'Web/CSS/:any' -tags: - - CSS - - Experimental - - Pseudo-class - - Reference -translation_of: 'Web/CSS/:is' -translation_of_original: 'Web/CSS/:any' ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La pseudo-classe :any() 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.

- -
/* 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;
-}
-
- -
Nota : Aquesta pseudo-classe està en curs de ser estandarditzada en CSS Selectors Level 4 sota el nom :matches(). És probable que la sintaxi i el nom de :-vendor-any() seran canviats perquè es reflecteixi en un futur proper.
- -

Sintaxi

- -

Sintaxi formal

- -
{{csssyntax}}
- -

Valors

- -
-
selector
-
Un selector. Això pot ser un selector simple o un selector múltiple compost de selectors simples CSS 3 i pot incloure el combinador descendent.
-
- -
Nota: Els selectors no poden contenir pseudo-elements i l'únic combinador permès és el combinador descendent.
- -

Exemples

- -

Per exemple, el següent 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;
-}
-
- -

Pot substituir-se per:

- -
/* 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;
-}
- -

No obstant això, no utilitzeu el següent: (Veure la secció sobre el rendiment més endavant.)

- -
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
-  list-style-type: square;
-}
- -

Notes

- -

Aquesta propietat és particularment útil quan es tracta de seccions i encapçalaments en HTML5. Des {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}} es poden niar, sense :any() , l'estil d'aquests perquè coincideixin entre si pot ser difícil.

- -

Per exemple, sense :any(), donar estil a tot els elements {{HTMLElement("h1")}} a diferents profunditats podria ser molt complicat:

- -
/* 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*/
-
- -

Usant :-any(), és molt més fàcil:

- -
/* 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;
-}
- -

Problemes amb el rendiment i l'especificitat

- -

Bug 561154 registra un problema amb Gecko en el qual l'especificitat de: :-moz-any() és incorrecta. La implementació actual (com Firefox 12) posa: :-moz-any() 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.

- -

Per exemple:

- -
.a > :-moz-any(.b, .c)
-
- -

és més lent que:

- -
.a > .b, .a > .c
-
- -

i el següent és més ràpid:

- -
:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
-
- -

Navegadors compatibles

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
DescripcióFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suport bàsic{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}12.0 (534.30){{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}5
- {{property_prefix("-webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
DescripcióAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}5
- {{property_prefix("-webkit")}}
-
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' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La pseudo-classe :any() 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.

+ +
/* 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;
+}
+
+ +
Nota : Aquesta pseudo-classe està en curs de ser estandarditzada en CSS Selectors Level 4 sota el nom :matches(). És probable que la sintaxi i el nom de :-vendor-any() seran canviats perquè es reflecteixi en un futur proper.
+ +

Sintaxi

+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Valors

+ +
+
selector
+
Un selector. Això pot ser un selector simple o un selector múltiple compost de selectors simples CSS 3 i pot incloure el combinador descendent.
+
+ +
Nota: Els selectors no poden contenir pseudo-elements i l'únic combinador permès és el combinador descendent.
+ +

Exemples

+ +

Per exemple, el següent 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;
+}
+
+ +

Pot substituir-se per:

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

No obstant això, no utilitzeu el següent: (Veure la secció sobre el rendiment més endavant.)

+ +
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
+  list-style-type: square;
+}
+ +

Notes

+ +

Aquesta propietat és particularment útil quan es tracta de seccions i encapçalaments en HTML5. Des {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}} es poden niar, sense :any() , l'estil d'aquests perquè coincideixin entre si pot ser difícil.

+ +

Per exemple, sense :any(), donar estil a tot els elements {{HTMLElement("h1")}} a diferents profunditats podria ser molt complicat:

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

Usant :-any(), és molt més fàcil:

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

Problemes amb el rendiment i l'especificitat

+ +

Bug 561154 registra un problema amb Gecko en el qual l'especificitat de: :-moz-any() és incorrecta. La implementació actual (com Firefox 12) posa: :-moz-any() 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.

+ +

Per exemple:

+ +
.a > :-moz-any(.b, .c)
+
+ +

és més lent que:

+ +
.a > .b, .a > .c
+
+ +

i el següent és més ràpid:

+ +
:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
+
+ +

Navegadors compatibles

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suport bàsic{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}12.0 (534.30){{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}5
+ {{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}5
+ {{property_prefix("-webkit")}}
+
diff --git a/files/ca/web/css/adjacent_sibling_combinator/index.html b/files/ca/web/css/adjacent_sibling_combinator/index.html new file mode 100644 index 0000000000..911a395693 --- /dev/null +++ b/files/ca/web/css/adjacent_sibling_combinator/index.html @@ -0,0 +1,135 @@ +--- +title: Combinador de germans adjacents +slug: Web/CSS/Selectors_de_germans_adjacents +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Reference + - Selectors +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

El combinador de germans adjacents (+) separa dos selectors i només coincideix amb el segon element si segueix immediatament el primer element, i tots dos són fills del mateix pare {{domxref("element")}}.

+ +
/* Paràgrafs que vénen immediatament després de qualsevol imatge */
+img + p {
+  font-style: bold;
+}
+ +

Sintaxi

+ +
former_element + target_element { style properties }
+
+ +

Exemple

+ +

CSS

+ +
li:first-of-type + li {
+  color: red;
+}
+
+ +

HTML

+ +
<ul>
+  <li>One</li>
+  <li>Two!</li>
+  <li>Three</li>
+</ul>
+ +

Resultat

+ +

{{EmbedLiveSample('Example', 200, 100)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}}Li dóna un nou nom al combinador "next-sibling".
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Internet Explorer 7 no actualitza l'estil correctament quan un element es col·loca dinàmicament abans d'un element que coincideixi amb el selector. En Internet Explorer 8, si un element s'insereix dinàmicament fent clic en un enllaç, l'estil del primer fill no s'aplicarà fins que l'enllaç perdi el focus.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/attribute_selectors/index.html b/files/ca/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..6778a2b3cb --- /dev/null +++ b/files/ca/web/css/attribute_selectors/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)}}
+
diff --git a/files/ca/web/css/child_combinator/index.html b/files/ca/web/css/child_combinator/index.html new file mode 100644 index 0000000000..f5cb8139f9 --- /dev/null +++ b/files/ca/web/css/child_combinator/index.html @@ -0,0 +1,135 @@ +--- +title: Combinador de fills +slug: Web/CSS/Selectors_de_fills +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Reference + - Selectors +translation_of: Web/CSS/Child_combinator +--- +
{{CSSRef("Selectors")}}
+ +

El combinador de fills (>) es col·loca entre dos selectors CSS. Solament coincideix amb aquells elements que coincideixen amb el segon selector que són fills d'elements que coincideixen amb el primer.

+ +
/* Enumera els elements que són fills de la llista "my-things" */
+ul.my-things > li {
+  margin: 2em;
+}
+ +

Els elements que coincideixin amb el segon selector han de ser els fills immediats dels elements que coincideixin amb el primer selector. Això és més estricte que el selector descendent, que coincideix amb tots els elements que coincideixen amb el segon selector per al qual existeix un element ancestral coincident amb el primer selector, independentment de la quantitat de "salts" en el DOM

+ +

Sintaxi

+ +
selector1 > selector2 { style properties }
+
+ +

Exemple

+ +

CSS

+ +
span {
+  background-color: white;
+}
+
+div > span {
+  background-color: DodgerBlue;
+}
+
+ +

HTML

+ +
<div>
+  <span>Span #1, in the div.
+    <span>Span #2, in the span that's in the div.</span>
+  </span>
+</div>
+<span>Span #3, not in the div at all.</span>
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example", 200, 100)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}Sense canvis
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/class_selectors/index.html b/files/ca/web/css/class_selectors/index.html new file mode 100644 index 0000000000..1f8cfdbee4 --- /dev/null +++ b/files/ca/web/css/class_selectors/index.html @@ -0,0 +1,139 @@ +--- +title: Selector Class +slug: Web/CSS/Selectors_de_Classe +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Class_selectors +--- +
{{CSSRef}}
+ +

El selector class CSS coincideix amb elements basats en el contingut de l'atribut {{htmlattrxref("class")}}.

+ +
/* Tots els elements amb class="spacious" */
+.spacious {
+  margin: 2em;
+}
+
+/* Tots els elements <li> amb class="spacious" */
+li.spacious {
+  margin: 2em;
+}
+ +

Sintaxi

+ +
.classname { style properties }
+ +

Recordeu que això és equivalent al següent {{Cssxref("Attribute_selectors", "attribute selector")}}:

+ +
[class~=classname] { style properties }
+ +

Exemple

+ +

CSS

+ +
div.classy {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<div class="classy">This div has a special class on it!</div>
+<div>This is just a regular div.</div>
+
+ +

Resultat

+ +

{{EmbedLiveSample('Example', '100%', 50)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}{{Spec2('CSS1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/css_box_model/dominar_el_col.lapse_del_marge/index.html b/files/ca/web/css/css_box_model/dominar_el_col.lapse_del_marge/index.html deleted file mode 100644 index 9b312fc789..0000000000 --- a/files/ca/web/css/css_box_model/dominar_el_col.lapse_del_marge/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Dominar el col.lapse del marge -slug: Web/CSS/CSS_Box_Model/Dominar_el_col.lapse_del_marge -tags: - - CSS - - CSS Box Model - - Guide - - Reference -translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing ---- -
{{CSSRef}}
- -

Els marges superior (top) i inferior (bottom) dels blocs, a vegades, es combinen (col·lapsats) en un únic marge, la grandària del qual és el més gran dels marges individuals (o només un d'ells, si són iguals), un comportament conegut com col·lapse del marge. Tingueu en compte que els marges dels elements flotants i absolutament posicionats mai es col·lapsen.

- -

El col·lapse de marges es produeix en tres casos bàsics:

- -
-
Germans adjacents
-
Els marges dels germans adjacents estan col·lapsats (excepte quan el darrer germà ha de ser eliminat dels flotadors anteriors).
-
Pare i primer/últim fill
-
Si no hi ha una vora, farcit, part en línia, context de format de blocs creat, o un espaia lliure per separar el {{cssxref("margin-top")}} d'un bloc del {{cssxref("margin-top")}} del seu primer bloc fill; o sense vora, farcit, contingut en línia, {{cssxref("height")}}, {{cssxref("min-height")}}, o {{cssxref("max-height")}} per separar el {{cssxref("margin-bottom")}} d'un bloc del {{cssxref("margin-bottom")}} del seu últim fill, llavors aquests marges es col·lapsen. El marge col·lapsat acaba fora del pare
-
Blocs buits
-
Si no hi ha vora, farcit, contingut en línia, {{cssxref("height")}} o {{cssxref("min-height")}} per separar un bloc {{cssxref("margin-top")}} del seu {{cssxref("margin-bottom")}}, llavors els marges superior i inferior es col·lapsen.
-
- -

Algunes coses a destacar:

- - - -

Exemples

- -

HTML

- -
<p>The bottom margin of this paragraph is collapsed …</p>
-<p>… with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p>
-
-<div>This parent element contains two paragraphs!
-  <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p>
-  <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p>
-</div>
-
-<p>I am <code>2rem</code> below the element above.</p>
- -

CSS

- -
div {
-  margin: 2rem 0;
-  background: lavender;
-}
-
-p {
-  margin: .4rem 0 1.2rem 0;
-  background: yellow;
-}
- -

Resultat

- -

{{EmbedLiveSample('Examples', 'auto', 350)}}

- -

Especificacions

- - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Definició inicial.
- -

Vegeu també

- - diff --git "a/files/ca/web/css/css_box_model/introducci\303\263_al_model_de_caixa_css/index.html" "b/files/ca/web/css/css_box_model/introducci\303\263_al_model_de_caixa_css/index.html" deleted file mode 100644 index bfb613ed6c..0000000000 --- "a/files/ca/web/css/css_box_model/introducci\303\263_al_model_de_caixa_css/index.html" +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Introducció al model de caixa CSS -slug: Web/CSS/CSS_Box_Model/Introducció_al_model_de_caixa_CSS -tags: - - CSS - - CSS Box Model - - Guide - - Reference -translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model ---- -
{{CSSRef}}
- -

Quan es dissenya un document, el motor d'interpretació del navegador representa cada element com una caixa rectangular d'acord amb el model de caixa CSS estàndard. CSS determina la grandària, la posició i les propietats (color, fons, grandària de la vora, etc.) d'aquests caixes.

- -

Cada caixa es compon de quatre parts (o àrees), definides per les seves respectives vores: la vora del contingut, la vora del farciment, la vora de la vora i la vora del marge.

- -

CSS Box model

- -

L'àrea de contingut, limitada per la vora del contingut, conté el contingut "real" de l'element, com ara text, una imatge o un reproductor de vídeo. Les seves dimensions són l'amplada del contingut (o l'amplada de la caixa de contingut) i l'alçada del contingut (o l'alçada de la caixa de contingut). Sovint té un color de fons o una imatge de fons.

- -

Si la propietat {{cssxref("box-sizing")}} s'estableix a content-box (predeterminat), la grandària de l'àrea de contingut es pot definir explícitament amb les propietats {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}} i {{cssxref("max-height")}}.

- -

L'àrea de farcit, delimitada per la vora de farcit, estén l'àrea de contingut per incloure el farciment de l'element. Les seves dimensions són l'amplada de la caixa de farcit i l'alçada de la caixa de farcit. Quan l'àrea de contingut té un fons, s'estén en el farcit.

- -

El gruix del farciment està determinat pel {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} i les propietats abreujades de {{cssxref("padding")}}.

- -

L'àrea de vora, delimitada per la vora de la vora, estén l'àrea de farciment per incloure les vores de l'element. Les seves dimensions són l'amplada de la caixa de vora i l'alçada de la caixa de vora.

- -

El gruix de les vores està determinat per les propietats {{cssxref("border-width")}} i les propietats abreujades {{cssxref("border")}}. Si la propietat {{cssxref("box-sizing")}} s'estableix a border-box, la grandària de l'àrea de la vora es pot definir explícitament amb les propietats {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}} i {{cssxref("max-height")}}.

- -

L'àrea de marge, delimitada per la vora del marge, estén l'àrea de la vora per incloure una àrea buida utilitzada per separar l'element dels seus veïns. Les seves dimensions són l'amplada de la caixa de marge i l'alçada de la caixa de marge.

- -

La grandària de l'àrea de marge està determinada pel {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} i les propietats abreujades {{cssxref("margin")}}. Quan es produeix el col.lapse del marge, l'àrea de marge no està clarament definida, ja que els marges es comparteixen entre les caixes.

- -

Finalment, tingueu en compte que, per als elements en línia no reemplaçats, la quantitat d'espai ocupat (la contribució a l'alçada de la línia) està determinat per la propietat {{cssxref('line-height')}} encara que les vores i el farciment encara es mostran al voltant del contingut.

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Encara que formulat amb més precisió, no hi ha canvi pràctic.
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}Definició inicial.
- -

Vegeu també

- - diff --git a/files/ca/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/ca/web/css/css_box_model/introduction_to_the_css_box_model/index.html new file mode 100644 index 0000000000..bfb613ed6c --- /dev/null +++ b/files/ca/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -0,0 +1,67 @@ +--- +title: Introducció al model de caixa CSS +slug: Web/CSS/CSS_Box_Model/Introducció_al_model_de_caixa_CSS +tags: + - CSS + - CSS Box Model + - Guide + - Reference +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +
{{CSSRef}}
+ +

Quan es dissenya un document, el motor d'interpretació del navegador representa cada element com una caixa rectangular d'acord amb el model de caixa CSS estàndard. CSS determina la grandària, la posició i les propietats (color, fons, grandària de la vora, etc.) d'aquests caixes.

+ +

Cada caixa es compon de quatre parts (o àrees), definides per les seves respectives vores: la vora del contingut, la vora del farciment, la vora de la vora i la vora del marge.

+ +

CSS Box model

+ +

L'àrea de contingut, limitada per la vora del contingut, conté el contingut "real" de l'element, com ara text, una imatge o un reproductor de vídeo. Les seves dimensions són l'amplada del contingut (o l'amplada de la caixa de contingut) i l'alçada del contingut (o l'alçada de la caixa de contingut). Sovint té un color de fons o una imatge de fons.

+ +

Si la propietat {{cssxref("box-sizing")}} s'estableix a content-box (predeterminat), la grandària de l'àrea de contingut es pot definir explícitament amb les propietats {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}} i {{cssxref("max-height")}}.

+ +

L'àrea de farcit, delimitada per la vora de farcit, estén l'àrea de contingut per incloure el farciment de l'element. Les seves dimensions són l'amplada de la caixa de farcit i l'alçada de la caixa de farcit. Quan l'àrea de contingut té un fons, s'estén en el farcit.

+ +

El gruix del farciment està determinat pel {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} i les propietats abreujades de {{cssxref("padding")}}.

+ +

L'àrea de vora, delimitada per la vora de la vora, estén l'àrea de farciment per incloure les vores de l'element. Les seves dimensions són l'amplada de la caixa de vora i l'alçada de la caixa de vora.

+ +

El gruix de les vores està determinat per les propietats {{cssxref("border-width")}} i les propietats abreujades {{cssxref("border")}}. Si la propietat {{cssxref("box-sizing")}} s'estableix a border-box, la grandària de l'àrea de la vora es pot definir explícitament amb les propietats {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}} i {{cssxref("max-height")}}.

+ +

L'àrea de marge, delimitada per la vora del marge, estén l'àrea de la vora per incloure una àrea buida utilitzada per separar l'element dels seus veïns. Les seves dimensions són l'amplada de la caixa de marge i l'alçada de la caixa de marge.

+ +

La grandària de l'àrea de marge està determinada pel {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} i les propietats abreujades {{cssxref("margin")}}. Quan es produeix el col.lapse del marge, l'àrea de marge no està clarament definida, ja que els marges es comparteixen entre les caixes.

+ +

Finalment, tingueu en compte que, per als elements en línia no reemplaçats, la quantitat d'espai ocupat (la contribució a l'alçada de la línia) està determinat per la propietat {{cssxref('line-height')}} encara que les vores i el farciment encara es mostran al voltant del contingut.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Encara que formulat amb més precisió, no hi ha canvi pràctic.
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}Definició inicial.
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/ca/web/css/css_box_model/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..9b312fc789 --- /dev/null +++ b/files/ca/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -0,0 +1,89 @@ +--- +title: Dominar el col.lapse del marge +slug: Web/CSS/CSS_Box_Model/Dominar_el_col.lapse_del_marge +tags: + - CSS + - CSS Box Model + - Guide + - Reference +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{CSSRef}}
+ +

Els marges superior (top) i inferior (bottom) dels blocs, a vegades, es combinen (col·lapsats) en un únic marge, la grandària del qual és el més gran dels marges individuals (o només un d'ells, si són iguals), un comportament conegut com col·lapse del marge. Tingueu en compte que els marges dels elements flotants i absolutament posicionats mai es col·lapsen.

+ +

El col·lapse de marges es produeix en tres casos bàsics:

+ +
+
Germans adjacents
+
Els marges dels germans adjacents estan col·lapsats (excepte quan el darrer germà ha de ser eliminat dels flotadors anteriors).
+
Pare i primer/últim fill
+
Si no hi ha una vora, farcit, part en línia, context de format de blocs creat, o un espaia lliure per separar el {{cssxref("margin-top")}} d'un bloc del {{cssxref("margin-top")}} del seu primer bloc fill; o sense vora, farcit, contingut en línia, {{cssxref("height")}}, {{cssxref("min-height")}}, o {{cssxref("max-height")}} per separar el {{cssxref("margin-bottom")}} d'un bloc del {{cssxref("margin-bottom")}} del seu últim fill, llavors aquests marges es col·lapsen. El marge col·lapsat acaba fora del pare
+
Blocs buits
+
Si no hi ha vora, farcit, contingut en línia, {{cssxref("height")}} o {{cssxref("min-height")}} per separar un bloc {{cssxref("margin-top")}} del seu {{cssxref("margin-bottom")}}, llavors els marges superior i inferior es col·lapsen.
+
+ +

Algunes coses a destacar:

+ + + +

Exemples

+ +

HTML

+ +
<p>The bottom margin of this paragraph is collapsed …</p>
+<p>… with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p>
+
+<div>This parent element contains two paragraphs!
+  <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p>
+  <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p>
+</div>
+
+<p>I am <code>2rem</code> below the element above.</p>
+ +

CSS

+ +
div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Examples', 'auto', 350)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Definició inicial.
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/css_selectors/index.html b/files/ca/web/css/css_selectors/index.html new file mode 100644 index 0000000000..9eaf8daffc --- /dev/null +++ b/files/ca/web/css/css_selectors/index.html @@ -0,0 +1,156 @@ +--- +title: Selectors CSS +slug: Web/CSS/Selectors_CSS +tags: + - CSS + - CSS Selectors + - Overview + - Reference + - Selectors +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef}}
+ +

Els Selectors CSS defineixen els elements als quals s'aplica un conjunt de normes CSS.

+ +

Selectors Bàsics

+ +
+
Selector de tipus
+
Selecciona tots els elements que coincideixen amb el nom del node donat.
+ Sintaxi: eltname
+ Exemple: input coincidirà amb qualsevol element {{HTMLElement('input')}}
+
Selector de clase
+
Selecciona tots els elements que tenen l'atribut class donat.
+ Sintaxi: .classname
+ Exemple: .index coincidirà amb qualsevol element que tingui una classe "index"
+
Selector de ID
+
Selecciona un element basat en el valor del seu atribut id. Només hi ha d'haver un element amb una ID determinat en un document.
+ Sintaxi: #idname
+ Exemple: #toc coincidiran amb l'element que té l'ID "toc".
+
Selector universal
+
Selecciona tots els elements. De manera opcional, pot estar restringit a un espai de noms específic o a tots els espais de noms.
+ Sintaxi: * ns|* *|*
+ Exemple: * coincideix amb tots els elements del document.
+
Selector d'atribut
+
Selecciona elements basats en el valor de l'atribut donat.
+ Sintaxi: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
+ Exemple: [autoplay] coincidiran tots els elements que tenen establert l'atribut autoplay (a qualsevol valor).
+
+ +

Combinadors

+ +
+
Combinador de germans adjacents
+
El combinador + selecciona els germans adjacents. Això significa que el segon element segueix directament el primer, i ambdós comparteixen el mateix pare.
+ Sintaxi: A + B
+ Exemple: h2 + p coincidirà amb tots el elements {{HTMLElement('p')}} que segueixen directament un {{HTMLElement('h2')}}.
+
Combinador general de germans
+
El combinador ~ selecciona els germans. Això significa que el segon element segueix el primer (encara que no necessàriament de forma immediata), i tots dos comparteixen el mateix pare.
+ Sintaxi: A ~ B
+ Exemple: p ~ span coincidirà amb tots els elements {{HTMLElement('span')}} que segueixen un {{HTMLElement('p')}}.
+
Combinador de fills
+
El combinador > selecciona els nodes que són fills directes del primer element.
+ Sintaxi: A > B
+ Exemple: ul > li coincidirà amb tots els elements {{HTMLElement('li')}} que estan niats directament dins d'un element {{HTMLElement('ul')}}.
+
Combinador de descendents
+
El combinador    selecciona els nodes que són descendents del primer element.
+ Sintaxi: A B
+ Exemple: div span coincidirà amb tots els elements {{HTMLElement('span')}} que es troben dins d'un element {{HTMLElement('div')}}.
+
+ +

Pseudo-classes

+ +

Pseudo-classes permeten la selecció d'elements basats en informació d'estat que no es troba a l'arbre del document.

+ +

Exemple: a:visited coincidirà amb tots els elements {{HTMLElement('a')}} que hagi visitat l'usuari.

+ +

Pseudo-elements

+ +

Pseudo-elements representen entitats que no estan incloses en HTML.

+ +

Exemple: p::first-line coincidirà amb la primera línia de tots els elements {{HTMLElement('p')}}.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.5{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
diff --git a/files/ca/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/ca/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html new file mode 100644 index 0000000000..53339b06e5 --- /dev/null +++ b/files/ca/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -0,0 +1,69 @@ +--- +title: 'Ùs de la pseudo-class :target en selectors' +slug: 'Web/CSS/Selectors_CSS/Using_the_:target_pseudo-class_in_selectors' +tags: + - ':target' + - CSS + - Guide + - Reference + - Selectors +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +
{{CSSRef}}
+ +

Quan una URL apunta a una peça específica d'un document, pot ser difícil per a l'usuari adonar-se. Esbrineu com podeu fer servir algun CSS senzill per cridar l'atenció sobre el destí d'una URL i millorar l'experiència de l'usuari.

+ +

Triar un destí

+ +

La pseudo-class {{ Cssxref(":target") }}s'utilitza per aplicar estil a l'element de destinació d'un URI que conté un identificador de fragment. Per exemple, l'URI http://developer.mozilla.org/en/docs/Using_the_:target_selector#example conté el identificador de fragment #example. En HTML, els identificadors corresponent els valors dels atributs id o name, ja que tots dos comparteixen el mateix espai de noms. Per tant, l'URI d'exemple assenyalaria l'encapçalament "example" en aquest document.

+ +

Suposem que desitjeu donar estil a qualsevol element h2 que és el destí d'un URI, però no voleu que qualsevol altre tipus d'element aconsegueixi un estil de destinació. Això és bastant simple:

+ +
h2:target {font-weight: bold;}
+ +

També és possible crear estils que siguin específics d'un fragment en particular del document. Això es realitza utilitzant el mateix valor de la identificació que es troba en l'URI. Per tant, per afegir una vora al fragment #example, escriuríem:

+ +
#example:target {border: 1px solid black;}
+ +

Dirigit a tots els elements

+ +

Si la intenció és crear un estil "ampli" que s'apliqui a tots els elements seleccionats, llavors el selector universal, ve molt bé:

+ +
:target {color: red;}
+
+ +

Exemple

+ +

En el següent exemple, hi ha cinc enllaços que apunten a elements en el mateix document. En seleccionar l'enllaç "First", per exemple, farà que <h1 id = "one"> es converteixi en l'element de destinació. Recordeu que el document pot saltar a una nova posició de desplaçament, ja que els elements de destinació es col·loquen a la part superior de la finestra del navegador si és possible.

+ +
+
<h4 id="one">...</h4> <p id="two">...</p>
+<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>
+
+<a href="#one">First</a>
+<a href="#two">Second</a>
+<a href="#three">Third</a>
+<a href="#four">Fourth</a>
+<a href="#five">Fifth</a>
+
+ +

Conclusió

+ +

En els casos en què un identificador de fragment apunti a una part del document, els lectors poden arribar a confondre's sobre quina part del document se suposa que han d'estar llegint. El donar estil a la destinació d'un URI, podem reduïr o eliminar la confusió del lector.

+ + + + + +
+

Informació del document original

+ + +
diff --git a/files/ca/web/css/descendant_combinator/index.html b/files/ca/web/css/descendant_combinator/index.html new file mode 100644 index 0000000000..1eb4fd57f8 --- /dev/null +++ b/files/ca/web/css/descendant_combinator/index.html @@ -0,0 +1,170 @@ +--- +title: Selectors de descendents +slug: Web/CSS/Selectors_de_descendents +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Descendant_combinator +--- +
{{CSSRef("Selectors")}}
+ +

El combinador descendent - en general representat per un  únic caràcter d'espai ( ) - combina dos selectors de tal manera que els elements que coincideixen amb el segon selector se seleccionen si tenen un element ancestral que coincideixi amb el primer selector. Els selectors que utilitzen un combinador descendent s'anomenen selectors de descendents.

+ +
/* Llista els elemenst que són descendsnts de la llista "my-things" */
+ul.my-things li {
+  margin: 2em;
+}
+ +

El combinador descendent és tècnicament un o més caràcters d'espais en blanc {{Glossary("CSS")}} - el caràcter d'espai en blanc i/o un dels quatre caràcters de control: retorn de carro, avanç de pàgina, nova línia i caràcters de tabulació - entre dos selectors en absència d'un altre combinador. A més, els caràcters d'espai en blanc de les que es compon el combinador poden contenir qualsevol nombre de comentaris CSS.

+ +

La naturalesa abstracta d'aquest combinador el fa diferent dels altres combinadors estandarditzats ja que aquests combinadors estan representats per una seqüència de caràcters finits diferents. Aquesta inconsistència es va tractar afegint un combinador descendent redundant representat per dos caràcters, més gran que  (>>), amb seqüència, donant-li una forma que és particularment similar a la del combinador fill, que comparteix una funció similar.

+ +

Sintaxi

+ +
selector1 selector2 { /* property declarations */ }
+
+ +
selector1 >> selector2 { /* property declarations */ }
+
+ +

Exemple

+ +

CSS

+ +
li {
+  list-style-type: disc;
+}
+
+li li {
+  list-style-type: circle;
+}
+
+ +

HTML

+ +
<ul>
+  <li>
+    <div>Item 1</div>
+    <ul>
+      <li>Subitem A</li>
+      <li>Subitem B</li>
+    </ul>
+  </li>
+  <li>
+    <div>Item 2</div>
+    <ul>
+      <li>Subitem A</li>
+      <li>Subitem B</li>
+    </ul>
+  </li>
+</ul>
+
+ +

Resultat

+ +

{{EmbedLiveSample('Example', 200, 160)}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#descendant-combinators', 'descendant combinator')}}{{Spec2('CSS4 Selectors')}}>> introduït com combinador descendent a més de l'espai en blanc com combinador.
{{SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#contextual-selectors', 'contextual selectors')}}{{Spec2('CSS1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Tipus >>{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatSafari("10")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Tipus >>{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/general_sibling_combinator/index.html b/files/ca/web/css/general_sibling_combinator/index.html new file mode 100644 index 0000000000..64429bbaba --- /dev/null +++ b/files/ca/web/css/general_sibling_combinator/index.html @@ -0,0 +1,129 @@ +--- +title: Combinador general de germans +slug: Web/CSS/Selectors_general_de_germans +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Reference + - Selectors +translation_of: Web/CSS/General_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

El combinador general de germans (~) separa dos selectors i només coincideix amb el segon element si segueix el primer element (encara que no necessàriament immediatament), i tots dos són fills del mateix pare {{domxref("element")}}.

+ +
/* Paràgrafs que són germans i posteriors a qualsevol imatge */
+img ~ p {
+  color: red;
+}
+ +

Sintaxi

+ +
element ~ element { style properties }
+
+ +

Exemple

+ +

CSS

+ +
p ~ span {
+  color: red;
+}
+ +

HTML

+ +
<span>This is not red.</span>
+<p>Here is a paragraph.</p>
+<code>Here is some code.</code>
+<span>And here is a red span!</span>
+<code>More code...</code>
+<span>And this is a red span!</span>
+
+ +

Resultat

+ +

{{ EmbedLiveSample('Example', 280, 120) }}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator') }}{{Spec2('CSS4 Selectors')}}Li dona un nou nom al combinador "subsequent-sibling"
{{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }}{{Spec2('CSS3 Selectors')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}793
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióFirefox Mobile (Gecko)AndroidEdgeIE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Veure

+ + diff --git a/files/ca/web/css/id_selectors/index.html b/files/ca/web/css/id_selectors/index.html new file mode 100644 index 0000000000..1b6f041eb6 --- /dev/null +++ b/files/ca/web/css/id_selectors/index.html @@ -0,0 +1,134 @@ +--- +title: Selector ID +slug: Web/CSS/Selectors_ID +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/ID_selectors +--- +
{{CSSRef}}
+ +

En un document HTML, el selector ID CSS coincideix amb un element basat en el valor del seu atribut {{htmlattrxref("ID")}}. L'atribut ID de l'element seleccionat ha de coincidir exactament amb el valor indicat en el selector

+ +
/* The element with id="demo" */
+div#demo {
+  border: red 2px solid;
+}
+ +

Sintaxi

+ +
#id_value { style properties }
+ +

Recordeu que això és equivalent al següent {{Cssxref("Attribute_selectors", "attribute selector")}}:

+ +
[id=id_value] { style properties }
+ +

Exemple

+ +

CSS

+ +
div#identified {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<div id="identified">This div has a special ID on it!</div>
+<div>This is just a regular div.</div>
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example", '100%', 50)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS4 Selectors")}} 
{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS3 Selectors")}} 
{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}{{Spec2("CSS1")}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/reference/index.html b/files/ca/web/css/reference/index.html new file mode 100644 index 0000000000..739dcdc9e3 --- /dev/null +++ b/files/ca/web/css/reference/index.html @@ -0,0 +1,206 @@ +--- +title: Referéncia CSS +slug: Web/CSS/Referéncia_CSS +tags: + - CSS + - Reference + - 'l10n:priority' +translation_of: Web/CSS/Reference +--- +

Utilitzeu aquesta referència CSS per explorar un índex alfabètic de totes les propietats CSS estàndard , pseudo-classes, pseudo-elements, tipus de dades, i regles-at. També podeu explorar una llista de tots els  selectors CSS organitzats per tipus i una llista de conceptes clau CSS. També s'inclou una breu referència DOM-CSS / CSSOM.

+ +

Sintaxi de regla bàsica

+ +

Sintaxi de regla d'estil

+ +
selectorlist {
+  property: value;
+  [more property:value; pairs]
+}
+
+... where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
+
+See selector, pseudo-class, pseudo-element lists below.
+
+ +

Exemples de regla d'estil

+ +
strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

Per a una introducció a nivell de principiant a la sintaxi de selectors CSS, consulteu aquest tutorial. Tingueu en compte que qualsevol error de sintaxi CSS en una definició de regla invalida tota la regla. Les regles no vàlides són ignorades pel navegador. Tingueu en compte que les definicions de la regla CSS són totalment basades en text (ASCII), mentre que DOM-CSS / CSSOM (el sistema de gestió de regles) està basat en objectes.

+ +

Sintaxi de regla-At (At-rule)

+ +

As the structure of at-rules varies widely, please see At-rule to find the syntax of the specific one you want.

+ +

Índex de paraules clau (Keyword)

+ +
{{CSS_Ref}}
+ +

Selectors

+ +

Selectors Bàsics

+ + + +

Combinadors

+ + + +

Pseudo-classes

+ +
+ +
+ +

Pseudo-elements

+ +
+ +
+ +
+

Vegeu també: Una llista completa de selectors en l'especificació Selectors Level 3.

+
+ +

Conceptes

+ +

Sintaxi i semàntica

+ + + +

Valors

+ + + +

Disseny

+ + + +

DOM-CSS / CSSOM

+ +

Tipus d'objectes principals

+ + + +

Mètodes importants

+ + + +

Vegeu també

+ + diff --git "a/files/ca/web/css/refer\303\251ncia_css/index.html" "b/files/ca/web/css/refer\303\251ncia_css/index.html" deleted file mode 100644 index 739dcdc9e3..0000000000 --- "a/files/ca/web/css/refer\303\251ncia_css/index.html" +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: Referéncia CSS -slug: Web/CSS/Referéncia_CSS -tags: - - CSS - - Reference - - 'l10n:priority' -translation_of: Web/CSS/Reference ---- -

Utilitzeu aquesta referència CSS per explorar un índex alfabètic de totes les propietats CSS estàndard , pseudo-classes, pseudo-elements, tipus de dades, i regles-at. També podeu explorar una llista de tots els  selectors CSS organitzats per tipus i una llista de conceptes clau CSS. També s'inclou una breu referència DOM-CSS / CSSOM.

- -

Sintaxi de regla bàsica

- -

Sintaxi de regla d'estil

- -
selectorlist {
-  property: value;
-  [more property:value; pairs]
-}
-
-... where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
-
-See selector, pseudo-class, pseudo-element lists below.
-
- -

Exemples de regla d'estil

- -
strong {
-  color: red;
-}
-
-div.menu-bar li:hover > ul {
-  display: block;
-}
-
- -

Per a una introducció a nivell de principiant a la sintaxi de selectors CSS, consulteu aquest tutorial. Tingueu en compte que qualsevol error de sintaxi CSS en una definició de regla invalida tota la regla. Les regles no vàlides són ignorades pel navegador. Tingueu en compte que les definicions de la regla CSS són totalment basades en text (ASCII), mentre que DOM-CSS / CSSOM (el sistema de gestió de regles) està basat en objectes.

- -

Sintaxi de regla-At (At-rule)

- -

As the structure of at-rules varies widely, please see At-rule to find the syntax of the specific one you want.

- -

Índex de paraules clau (Keyword)

- -
{{CSS_Ref}}
- -

Selectors

- -

Selectors Bàsics

- - - -

Combinadors

- - - -

Pseudo-classes

- -
- -
- -

Pseudo-elements

- -
- -
- -
-

Vegeu també: Una llista completa de selectors en l'especificació Selectors Level 3.

-
- -

Conceptes

- -

Sintaxi i semàntica

- - - -

Valors

- - - -

Disseny

- - - -

DOM-CSS / CSSOM

- -

Tipus d'objectes principals

- - - -

Mètodes importants

- - - -

Vegeu també

- - diff --git a/files/ca/web/css/selectors_css/index.html b/files/ca/web/css/selectors_css/index.html deleted file mode 100644 index 9eaf8daffc..0000000000 --- a/files/ca/web/css/selectors_css/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Selectors CSS -slug: Web/CSS/Selectors_CSS -tags: - - CSS - - CSS Selectors - - Overview - - Reference - - Selectors -translation_of: Web/CSS/CSS_Selectors ---- -
{{CSSRef}}
- -

Els Selectors CSS defineixen els elements als quals s'aplica un conjunt de normes CSS.

- -

Selectors Bàsics

- -
-
Selector de tipus
-
Selecciona tots els elements que coincideixen amb el nom del node donat.
- Sintaxi: eltname
- Exemple: input coincidirà amb qualsevol element {{HTMLElement('input')}}
-
Selector de clase
-
Selecciona tots els elements que tenen l'atribut class donat.
- Sintaxi: .classname
- Exemple: .index coincidirà amb qualsevol element que tingui una classe "index"
-
Selector de ID
-
Selecciona un element basat en el valor del seu atribut id. Només hi ha d'haver un element amb una ID determinat en un document.
- Sintaxi: #idname
- Exemple: #toc coincidiran amb l'element que té l'ID "toc".
-
Selector universal
-
Selecciona tots els elements. De manera opcional, pot estar restringit a un espai de noms específic o a tots els espais de noms.
- Sintaxi: * ns|* *|*
- Exemple: * coincideix amb tots els elements del document.
-
Selector d'atribut
-
Selecciona elements basats en el valor de l'atribut donat.
- Sintaxi: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
- Exemple: [autoplay] coincidiran tots els elements que tenen establert l'atribut autoplay (a qualsevol valor).
-
- -

Combinadors

- -
-
Combinador de germans adjacents
-
El combinador + selecciona els germans adjacents. Això significa que el segon element segueix directament el primer, i ambdós comparteixen el mateix pare.
- Sintaxi: A + B
- Exemple: h2 + p coincidirà amb tots el elements {{HTMLElement('p')}} que segueixen directament un {{HTMLElement('h2')}}.
-
Combinador general de germans
-
El combinador ~ selecciona els germans. Això significa que el segon element segueix el primer (encara que no necessàriament de forma immediata), i tots dos comparteixen el mateix pare.
- Sintaxi: A ~ B
- Exemple: p ~ span coincidirà amb tots els elements {{HTMLElement('span')}} que segueixen un {{HTMLElement('p')}}.
-
Combinador de fills
-
El combinador > selecciona els nodes que són fills directes del primer element.
- Sintaxi: A > B
- Exemple: ul > li coincidirà amb tots els elements {{HTMLElement('li')}} que estan niats directament dins d'un element {{HTMLElement('ul')}}.
-
Combinador de descendents
-
El combinador    selecciona els nodes que són descendents del primer element.
- Sintaxi: A B
- Exemple: div span coincidirà amb tots els elements {{HTMLElement('span')}} que es troben dins d'un element {{HTMLElement('div')}}.
-
- -

Pseudo-classes

- -

Pseudo-classes permeten la selecció d'elements basats en informació d'estat que no es troba a l'arbre del document.

- -

Exemple: a:visited coincidirà amb tots els elements {{HTMLElement('a')}} que hagi visitat l'usuari.

- -

Pseudo-elements

- -

Pseudo-elements representen entitats que no estan incloses en HTML.

- -

Exemple: p::first-line coincidirà amb la primera línia de tots els elements {{HTMLElement('p')}}.

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definició inicial
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
DescripcióChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1{{CompatGeckoDesktop("1")}}3.03.51.0
-
- -
- - - - - - - - - - - - - - - - - - - -
DescripcióAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.5{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}3.2
-
diff --git a/files/ca/web/css/selectors_css/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/ca/web/css/selectors_css/using_the__colon_target_pseudo-class_in_selectors/index.html deleted file mode 100644 index 53339b06e5..0000000000 --- a/files/ca/web/css/selectors_css/using_the__colon_target_pseudo-class_in_selectors/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: 'Ùs de la pseudo-class :target en selectors' -slug: 'Web/CSS/Selectors_CSS/Using_the_:target_pseudo-class_in_selectors' -tags: - - ':target' - - CSS - - Guide - - Reference - - Selectors -translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' ---- -
{{CSSRef}}
- -

Quan una URL apunta a una peça específica d'un document, pot ser difícil per a l'usuari adonar-se. Esbrineu com podeu fer servir algun CSS senzill per cridar l'atenció sobre el destí d'una URL i millorar l'experiència de l'usuari.

- -

Triar un destí

- -

La pseudo-class {{ Cssxref(":target") }}s'utilitza per aplicar estil a l'element de destinació d'un URI que conté un identificador de fragment. Per exemple, l'URI http://developer.mozilla.org/en/docs/Using_the_:target_selector#example conté el identificador de fragment #example. En HTML, els identificadors corresponent els valors dels atributs id o name, ja que tots dos comparteixen el mateix espai de noms. Per tant, l'URI d'exemple assenyalaria l'encapçalament "example" en aquest document.

- -

Suposem que desitjeu donar estil a qualsevol element h2 que és el destí d'un URI, però no voleu que qualsevol altre tipus d'element aconsegueixi un estil de destinació. Això és bastant simple:

- -
h2:target {font-weight: bold;}
- -

També és possible crear estils que siguin específics d'un fragment en particular del document. Això es realitza utilitzant el mateix valor de la identificació que es troba en l'URI. Per tant, per afegir una vora al fragment #example, escriuríem:

- -
#example:target {border: 1px solid black;}
- -

Dirigit a tots els elements

- -

Si la intenció és crear un estil "ampli" que s'apliqui a tots els elements seleccionats, llavors el selector universal, ve molt bé:

- -
:target {color: red;}
-
- -

Exemple

- -

En el següent exemple, hi ha cinc enllaços que apunten a elements en el mateix document. En seleccionar l'enllaç "First", per exemple, farà que <h1 id = "one"> es converteixi en l'element de destinació. Recordeu que el document pot saltar a una nova posició de desplaçament, ja que els elements de destinació es col·loquen a la part superior de la finestra del navegador si és possible.

- -
-
<h4 id="one">...</h4> <p id="two">...</p>
-<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>
-
-<a href="#one">First</a>
-<a href="#two">Second</a>
-<a href="#three">Third</a>
-<a href="#four">Fourth</a>
-<a href="#five">Fifth</a>
-
- -

Conclusió

- -

En els casos en què un identificador de fragment apunti a una part del document, els lectors poden arribar a confondre's sobre quina part del document se suposa que han d'estar llegint. El donar estil a la destinació d'un URI, podem reduïr o eliminar la confusió del lector.

- - - - - -
-

Informació del document original

- - -
diff --git a/files/ca/web/css/selectors_d'atribut/index.html b/files/ca/web/css/selectors_d'atribut/index.html deleted file mode 100644 index 6778a2b3cb..0000000000 --- a/files/ca/web/css/selectors_d'atribut/index.html +++ /dev/null @@ -1,250 +0,0 @@ ---- -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)}}
-
diff --git a/files/ca/web/css/selectors_de_classe/index.html b/files/ca/web/css/selectors_de_classe/index.html deleted file mode 100644 index 1f8cfdbee4..0000000000 --- a/files/ca/web/css/selectors_de_classe/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Selector Class -slug: Web/CSS/Selectors_de_Classe -tags: - - CSS - - Reference - - Selectors -translation_of: Web/CSS/Class_selectors ---- -
{{CSSRef}}
- -

El selector class CSS coincideix amb elements basats en el contingut de l'atribut {{htmlattrxref("class")}}.

- -
/* Tots els elements amb class="spacious" */
-.spacious {
-  margin: 2em;
-}
-
-/* Tots els elements <li> amb class="spacious" */
-li.spacious {
-  margin: 2em;
-}
- -

Sintaxi

- -
.classname { style properties }
- -

Recordeu que això és equivalent al següent {{Cssxref("Attribute_selectors", "attribute selector")}}:

- -
[class~=classname] { style properties }
- -

Exemple

- -

CSS

- -
div.classy {
-  background-color: skyblue;
-}
-
- -

HTML

- -
<div class="classy">This div has a special class on it!</div>
-<div>This is just a regular div.</div>
-
- -

Resultat

- -

{{EmbedLiveSample('Example', '100%', 50)}}

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}{{Spec2('CSS1')}}Definició inicial
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/ca/web/css/selectors_de_descendents/index.html b/files/ca/web/css/selectors_de_descendents/index.html deleted file mode 100644 index 1eb4fd57f8..0000000000 --- a/files/ca/web/css/selectors_de_descendents/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: Selectors de descendents -slug: Web/CSS/Selectors_de_descendents -tags: - - CSS - - Reference - - Selectors -translation_of: Web/CSS/Descendant_combinator ---- -
{{CSSRef("Selectors")}}
- -

El combinador descendent - en general representat per un  únic caràcter d'espai ( ) - combina dos selectors de tal manera que els elements que coincideixen amb el segon selector se seleccionen si tenen un element ancestral que coincideixi amb el primer selector. Els selectors que utilitzen un combinador descendent s'anomenen selectors de descendents.

- -
/* Llista els elemenst que són descendsnts de la llista "my-things" */
-ul.my-things li {
-  margin: 2em;
-}
- -

El combinador descendent és tècnicament un o més caràcters d'espais en blanc {{Glossary("CSS")}} - el caràcter d'espai en blanc i/o un dels quatre caràcters de control: retorn de carro, avanç de pàgina, nova línia i caràcters de tabulació - entre dos selectors en absència d'un altre combinador. A més, els caràcters d'espai en blanc de les que es compon el combinador poden contenir qualsevol nombre de comentaris CSS.

- -

La naturalesa abstracta d'aquest combinador el fa diferent dels altres combinadors estandarditzats ja que aquests combinadors estan representats per una seqüència de caràcters finits diferents. Aquesta inconsistència es va tractar afegint un combinador descendent redundant representat per dos caràcters, més gran que  (>>), amb seqüència, donant-li una forma que és particularment similar a la del combinador fill, que comparteix una funció similar.

- -

Sintaxi

- -
selector1 selector2 { /* property declarations */ }
-
- -
selector1 >> selector2 { /* property declarations */ }
-
- -

Exemple

- -

CSS

- -
li {
-  list-style-type: disc;
-}
-
-li li {
-  list-style-type: circle;
-}
-
- -

HTML

- -
<ul>
-  <li>
-    <div>Item 1</div>
-    <ul>
-      <li>Subitem A</li>
-      <li>Subitem B</li>
-    </ul>
-  </li>
-  <li>
-    <div>Item 2</div>
-    <ul>
-      <li>Subitem A</li>
-      <li>Subitem B</li>
-    </ul>
-  </li>
-</ul>
-
- -

Resultat

- -

{{EmbedLiveSample('Example', 200, 160)}}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#descendant-combinators', 'descendant combinator')}}{{Spec2('CSS4 Selectors')}}>> introduït com combinador descendent a més de l'espai en blanc com combinador.
{{SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#contextual-selectors', 'contextual selectors')}}{{Spec2('CSS1')}}Definició inicial
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Tipus >>{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatSafari("10")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Tipus >>{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/ca/web/css/selectors_de_fills/index.html b/files/ca/web/css/selectors_de_fills/index.html deleted file mode 100644 index f5cb8139f9..0000000000 --- a/files/ca/web/css/selectors_de_fills/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Combinador de fills -slug: Web/CSS/Selectors_de_fills -tags: - - CSS - - NeedsMobileBrowserCompatibility - - Reference - - Selectors -translation_of: Web/CSS/Child_combinator ---- -
{{CSSRef("Selectors")}}
- -

El combinador de fills (>) es col·loca entre dos selectors CSS. Solament coincideix amb aquells elements que coincideixen amb el segon selector que són fills d'elements que coincideixen amb el primer.

- -
/* Enumera els elements que són fills de la llista "my-things" */
-ul.my-things > li {
-  margin: 2em;
-}
- -

Els elements que coincideixin amb el segon selector han de ser els fills immediats dels elements que coincideixin amb el primer selector. Això és més estricte que el selector descendent, que coincideix amb tots els elements que coincideixen amb el segon selector per al qual existeix un element ancestral coincident amb el primer selector, independentment de la quantitat de "salts" en el DOM

- -

Sintaxi

- -
selector1 > selector2 { style properties }
-
- -

Exemple

- -

CSS

- -
span {
-  background-color: white;
-}
-
-div > span {
-  background-color: DodgerBlue;
-}
-
- -

HTML

- -
<div>
-  <span>Span #1, in the div.
-    <span>Span #2, in the span that's in the div.</span>
-  </span>
-</div>
-<span>Span #3, not in the div at all.</span>
-
- -

Resultat

- -

{{EmbedLiveSample("Example", 200, 100)}}

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}Sense canvis
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Definició inicial
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/ca/web/css/selectors_de_germans_adjacents/index.html b/files/ca/web/css/selectors_de_germans_adjacents/index.html deleted file mode 100644 index 911a395693..0000000000 --- a/files/ca/web/css/selectors_de_germans_adjacents/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Combinador de germans adjacents -slug: Web/CSS/Selectors_de_germans_adjacents -tags: - - CSS - - NeedsMobileBrowserCompatibility - - Reference - - Selectors -translation_of: Web/CSS/Adjacent_sibling_combinator ---- -
{{CSSRef("Selectors")}}
- -

El combinador de germans adjacents (+) separa dos selectors i només coincideix amb el segon element si segueix immediatament el primer element, i tots dos són fills del mateix pare {{domxref("element")}}.

- -
/* Paràgrafs que vénen immediatament després de qualsevol imatge */
-img + p {
-  font-style: bold;
-}
- -

Sintaxi

- -
former_element + target_element { style properties }
-
- -

Exemple

- -

CSS

- -
li:first-of-type + li {
-  color: red;
-}
-
- -

HTML

- -
<ul>
-  <li>One</li>
-  <li>Two!</li>
-  <li>Three</li>
-</ul>
- -

Resultat

- -

{{EmbedLiveSample('Example', 200, 100)}}

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}}Li dóna un nou nom al combinador "next-sibling".
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Definició inicial
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

[1] Internet Explorer 7 no actualitza l'estil correctament quan un element es col·loca dinàmicament abans d'un element que coincideixi amb el selector. En Internet Explorer 8, si un element s'insereix dinàmicament fent clic en un enllaç, l'estil del primer fill no s'aplicarà fins que l'enllaç perdi el focus.

- -

Vegeu també

- - diff --git a/files/ca/web/css/selectors_de_tipus/index.html b/files/ca/web/css/selectors_de_tipus/index.html deleted file mode 100644 index d87b102ac3..0000000000 --- a/files/ca/web/css/selectors_de_tipus/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Selector Type -slug: Web/CSS/Selectors_de_Tipus -tags: - - CSS - - HTML - - NeedsMobileBrowserCompatibility - - Node - - Reference - - Selectors -translation_of: Web/CSS/Type_selectors ---- -
{{CSSRef}}
- -

El selector type CSS coincideix amb elements per nom del node. En altres paraules, selecciona tots els elements del tipus donat dins d'un document.

- -
/* Tots els elements <a>. */
-a {
-  color: purple;
-}
- -

Sintaxi

- -
element { style properties }
-
- -

Exemple

- -

CSS

- -
span {
-  background-color: skyblue;
-}
-
- -

HTML

- -
<span>Here's a span with some text.</span>
-<p>Here's a p with some text.</p>
-<span>Here's a span with more text.</span>
-
- -

Resultat

- -

{{EmbedLiveSample('Example', '100%', 150)}}

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}Sense canvis
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Definició inicial
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/ca/web/css/selectors_general_de_germans/index.html b/files/ca/web/css/selectors_general_de_germans/index.html deleted file mode 100644 index 64429bbaba..0000000000 --- a/files/ca/web/css/selectors_general_de_germans/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Combinador general de germans -slug: Web/CSS/Selectors_general_de_germans -tags: - - CSS - - NeedsMobileBrowserCompatibility - - Reference - - Selectors -translation_of: Web/CSS/General_sibling_combinator ---- -
{{CSSRef("Selectors")}}
- -

El combinador general de germans (~) separa dos selectors i només coincideix amb el segon element si segueix el primer element (encara que no necessàriament immediatament), i tots dos són fills del mateix pare {{domxref("element")}}.

- -
/* Paràgrafs que són germans i posteriors a qualsevol imatge */
-img ~ p {
-  color: red;
-}
- -

Sintaxi

- -
element ~ element { style properties }
-
- -

Exemple

- -

CSS

- -
p ~ span {
-  color: red;
-}
- -

HTML

- -
<span>This is not red.</span>
-<p>Here is a paragraph.</p>
-<code>Here is some code.</code>
-<span>And here is a red span!</span>
-<code>More code...</code>
-<span>And this is a red span!</span>
-
- -

Resultat

- -

{{ EmbedLiveSample('Example', 280, 120) }}

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{ SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator') }}{{Spec2('CSS4 Selectors')}}Li dona un nou nom al combinador "subsequent-sibling"
{{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }}{{Spec2('CSS3 Selectors')}}Definició inicial.
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}793
-
- -
- - - - - - - - - - - - - - - - - - - - - -
DescripcióFirefox Mobile (Gecko)AndroidEdgeIE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Veure

- - diff --git a/files/ca/web/css/selectors_id/index.html b/files/ca/web/css/selectors_id/index.html deleted file mode 100644 index 1b6f041eb6..0000000000 --- a/files/ca/web/css/selectors_id/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Selector ID -slug: Web/CSS/Selectors_ID -tags: - - CSS - - Reference - - Selectors -translation_of: Web/CSS/ID_selectors ---- -
{{CSSRef}}
- -

En un document HTML, el selector ID CSS coincideix amb un element basat en el valor del seu atribut {{htmlattrxref("ID")}}. L'atribut ID de l'element seleccionat ha de coincidir exactament amb el valor indicat en el selector

- -
/* The element with id="demo" */
-div#demo {
-  border: red 2px solid;
-}
- -

Sintaxi

- -
#id_value { style properties }
- -

Recordeu que això és equivalent al següent {{Cssxref("Attribute_selectors", "attribute selector")}}:

- -
[id=id_value] { style properties }
- -

Exemple

- -

CSS

- -
div#identified {
-  background-color: skyblue;
-}
-
- -

HTML

- -
<div id="identified">This div has a special ID on it!</div>
-<div>This is just a regular div.</div>
-
- -

Resultat

- -

{{EmbedLiveSample("Example", '100%', 50)}}

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS4 Selectors")}} 
{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS3 Selectors")}} 
{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}{{Spec2("CSS1")}}Definició inicial
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/ca/web/css/selectors_universal/index.html b/files/ca/web/css/selectors_universal/index.html deleted file mode 100644 index 6aa7931ef9..0000000000 --- a/files/ca/web/css/selectors_universal/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: Selector Universal -slug: Web/CSS/Selectors_Universal -tags: - - CSS - - NeedsBrowserCompatibility - - NeedsMobileBrowserCompatibility - - Reference - - Selectors -translation_of: Web/CSS/Universal_selectors ---- -
{{CSSRef}}
- -

El selector universal CSS (*) coincideix amb elements de qualsevol tipus.

- -
/* Selecciona tots els elements */
-* {
-  color: green;
-}
- -

A partir de CSS3, l'asterisc pot ser usat en combinació amb {{cssxref("CSS_Namespaces", "namespaces")}}:

- - - -

Sintaxi

- -
* { style properties }
- -

L'asterisc és opcional amb selectors simples . Per exemple , *.warning i .warning són equivalents.

- -

Exemples

- -

CSS

- -
* [lang^=en] {
-  color: green;
-}
-
-*.warning {
-  color: red;
-}
-
-*#maincontent {
-  border: 1px solid blue;
-}
-
-.floating {
-  float: left
-}
-
-/* automatically clear the next sibling after a floating element */
-.floating + * {
-  clear: left;
-}
-
- -

HTML

- -
<p class="warning">
-  <span lang="en-us">A green span</span> in a red paragraph.</span>
-</p>
-<p id="maincontent" lang="en-gb">
-  <span class="warning">A red span</span> in a green paragraph.</span>
-</p>
- -

Resultat

- -

{{EmbedLiveSample('Examples')}}

- -

Especificacions

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}{{Spec2('CSS3 Selectors')}}Defineix el comportament pel que fa als espais de noms i afegeix suggeriments que permeten ometre el selector dins de pseudo-elements
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}{{Spec2('CSS2.1')}}Definició inicial
- - - -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}7{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Combinació amb suport d'espai de noms{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}981.3
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Combinació amb suport d'espai de noms{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/ca/web/css/sintaxi/index.html b/files/ca/web/css/sintaxi/index.html deleted file mode 100644 index 51931c11f0..0000000000 --- a/files/ca/web/css/sintaxi/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Sintaxi -slug: Web/CSS/Sintaxi -tags: - - CSS - - Guide - - Reference - - Web -translation_of: Web/CSS/Syntax ---- -
{{cssref}}
- -

L'objectiu bàsic del llenguatge de la Fulla d'Estil en Cascada (CSS) és permetre que un motor del navegador pinti elements de la pàgina amb característiques específiques, com ara colors, posicionament o decoracions. La sintaxi CSS reflecteix aquest objectiu i els seus components bàsics són:

- - - -

Declaracions CSS

- -

Establir propietats CSS a valors específics és la funció principal del llenguatge CSS. Un parell de propietats i valors s'anomena declaració, i qualsevol motor CSS calcula quines declaracions s'apliquen a cada element d'una pàgina per tal d'establir-la de forma adequada i definir-la.

- -

Les dues propietats i els valors no són sensibles a majúscules i minúscules de manera predeterminada a CSS. El parell està separat per dos punts, ':' (U + 003A COLON), i els espais en blanc abans, entre i després de les propietats i valors, però no necessàriament a l'interior, s'ignoren.

- -

css syntax - declaration.png

- -

Hi ha més de 100 propiertats diferents en CSS i un nombre gairebé infinit de valors diferents. No es permeten tots els parells de propietats i valors i cada propietat defineix quins són els valors vàlids. Quan un valor no és vàlid per a una propietat determinada, la declaració es considera invàlida i és totalment ignorada per el motor CSS .

- -

Blocs de declaracions CSS

- -

Les declaracions s'agrupen en blocs, és a dir, en una estructura delimitada per una clau d'obertura, '{' (U+007B LEFT CURLY BRACKET), i una de tancament, '}' (U+007D RIGHT CURLY BRACKET). Els blocs de vegades poden ser niats, de manera que les claus d'oberture i tancament han de coincidir.

- -

css syntax - block.png

- -

Aquests blocs són naturalment anomenats blocs de declaració i les declaracions dins d'elles estan separades per un punt i coma, ';' (U + 003B SEMICOLON). Un bloc de declaració pot estar buit, aixó és, que conté una declaració nul·la. Els espais en blanc al voltant de les declaracions s'ignoren. L'última declaració d'un bloc no necessita ser acabada per un punt i coma, tot i que sovint es considera un bon estil per fer-ho ja que evita oblidar-se d'afegir-lo quan s'estén el bloc amb una altra declaració.

- -

css syntax - declarations block.png

- -
El contingut d'un bloc de declaració CSS, és una llista de declaracions separades per punt i coma, sense les claus inicials i de tancament, es pot incloure dins d'un atribut d'estil.
- -

Regles de CSS

- -

Si les fulles d'estil només poguessin aplicar una declaració a cada element d'una pàgina web, serien bastant inútils. L'objectiu real és aplicar diferents declaracions a diferents parts del document.

- -

CSS ho permet associant condicions amb blocs de declaracions. Cada bloc de declaració (vàlid) està precedit d'un o més selectors que són condicions que seleccionen alguns elements de la pàgina. El bloc de declaracions d'un grup de parells de selectors s'anomena un conjunt de regles (ruleset), o sovint només una regla (rule).

- -

css syntax - ruleset.png

- -

Com que un element de la pàgina pot coincidir amb diversos selectors i, per tant, amb diverses regles que poden incloure una propietat determinada en diverses ocasions, amb valors diferents, l'estàndard CSS defineix quina té prioritat sobre l'altra i s'ha d'aplicar: això s'anomena algorisme en cascade.

- -
És important notar que fins i tot si un conjunt de regles caracteritzat per un grup de selectors és una espècie d'abreviatura que reemplaça els conjunts de regles amb un sol selector cadascun, això no s'aplica a la validesa del conjunt de regles en si.
-
-Això dóna lloc a una conseqüència important: si un únic selector bàsic no és vàlid, com quan s'utilitza un pseudo-element o pseudo-classe desconegut, el selector sencer és invàlid i per tant s'ignora tota la regla (no és vàlida).
- -

Sentències CSS

- -

Els conjunts de regles són els blocs principals de construcció d'una fulla d'estil, que sovint només consisteixen en una gran llista d'elles. Però hi ha una altra informació que un autor web vol transmetre en la fulla d'estil, com el joc de caràcters, altres fulles d'estil externes per importar, descripcions de tipus de fonts o comptadors de llistes i molts més. Utilitzarà altres tipus específics de declaracions per fer-ho.

- -

Una declaració és un bloc de construcció que comença amb qualsevol caràcter que no sigui l'espai i que finalitza en la primera clau de tancament o punt i coma (fora d'una cadena, no escapada i no s'inclou en un altre parell de {}, () o []).

- -

css syntax - statements Venn diag.png

- -

Hi ha dos tipus de declaracions:

- - - -

Qualsevol declaració que no sigui un conjunt de regles (ruleset) o una at-rule no és vàlida i és ignorada.

- -

Hi ha un altre grup de declaracions – les declaracions niades. Aquestes són declaracions que es poden utilitzar en un subconjunt específic de regles-at – les regles de grup condicional. Aquestes declaracions només s'apliquen si es compleix una condició específica: el contingut de la regla-at @media només s'aplica si el dispositiu en què el navegador s'executa coincideix amb la condició expressada; el contingut de la regla-at @document només s'aplica si la pàgina actual coincideix amb algunes condicions, i així successivament. En CSS1 i CSS2.1, només es podien utilitzar conjunts de regles dins de les regles de grup condicional. Això va ser molt restrictiu i aquesta restricció es va aixecar en CSS Conditionals Level 3. Ara, tot i que encara és experimental i no és compatible amb tots els navegadors, les regles de grup condicional poden contenir un rang de contingut més ampli: però també alguns conjunts de regles, però no totes les regles-at.

- -

Vegeu també

- - diff --git a/files/ca/web/css/syntax/index.html b/files/ca/web/css/syntax/index.html new file mode 100644 index 0000000000..51931c11f0 --- /dev/null +++ b/files/ca/web/css/syntax/index.html @@ -0,0 +1,79 @@ +--- +title: Sintaxi +slug: Web/CSS/Sintaxi +tags: + - CSS + - Guide + - Reference + - Web +translation_of: Web/CSS/Syntax +--- +
{{cssref}}
+ +

L'objectiu bàsic del llenguatge de la Fulla d'Estil en Cascada (CSS) és permetre que un motor del navegador pinti elements de la pàgina amb característiques específiques, com ara colors, posicionament o decoracions. La sintaxi CSS reflecteix aquest objectiu i els seus components bàsics són:

+ + + +

Declaracions CSS

+ +

Establir propietats CSS a valors específics és la funció principal del llenguatge CSS. Un parell de propietats i valors s'anomena declaració, i qualsevol motor CSS calcula quines declaracions s'apliquen a cada element d'una pàgina per tal d'establir-la de forma adequada i definir-la.

+ +

Les dues propietats i els valors no són sensibles a majúscules i minúscules de manera predeterminada a CSS. El parell està separat per dos punts, ':' (U + 003A COLON), i els espais en blanc abans, entre i després de les propietats i valors, però no necessàriament a l'interior, s'ignoren.

+ +

css syntax - declaration.png

+ +

Hi ha més de 100 propiertats diferents en CSS i un nombre gairebé infinit de valors diferents. No es permeten tots els parells de propietats i valors i cada propietat defineix quins són els valors vàlids. Quan un valor no és vàlid per a una propietat determinada, la declaració es considera invàlida i és totalment ignorada per el motor CSS .

+ +

Blocs de declaracions CSS

+ +

Les declaracions s'agrupen en blocs, és a dir, en una estructura delimitada per una clau d'obertura, '{' (U+007B LEFT CURLY BRACKET), i una de tancament, '}' (U+007D RIGHT CURLY BRACKET). Els blocs de vegades poden ser niats, de manera que les claus d'oberture i tancament han de coincidir.

+ +

css syntax - block.png

+ +

Aquests blocs són naturalment anomenats blocs de declaració i les declaracions dins d'elles estan separades per un punt i coma, ';' (U + 003B SEMICOLON). Un bloc de declaració pot estar buit, aixó és, que conté una declaració nul·la. Els espais en blanc al voltant de les declaracions s'ignoren. L'última declaració d'un bloc no necessita ser acabada per un punt i coma, tot i que sovint es considera un bon estil per fer-ho ja que evita oblidar-se d'afegir-lo quan s'estén el bloc amb una altra declaració.

+ +

css syntax - declarations block.png

+ +
El contingut d'un bloc de declaració CSS, és una llista de declaracions separades per punt i coma, sense les claus inicials i de tancament, es pot incloure dins d'un atribut d'estil.
+ +

Regles de CSS

+ +

Si les fulles d'estil només poguessin aplicar una declaració a cada element d'una pàgina web, serien bastant inútils. L'objectiu real és aplicar diferents declaracions a diferents parts del document.

+ +

CSS ho permet associant condicions amb blocs de declaracions. Cada bloc de declaració (vàlid) està precedit d'un o més selectors que són condicions que seleccionen alguns elements de la pàgina. El bloc de declaracions d'un grup de parells de selectors s'anomena un conjunt de regles (ruleset), o sovint només una regla (rule).

+ +

css syntax - ruleset.png

+ +

Com que un element de la pàgina pot coincidir amb diversos selectors i, per tant, amb diverses regles que poden incloure una propietat determinada en diverses ocasions, amb valors diferents, l'estàndard CSS defineix quina té prioritat sobre l'altra i s'ha d'aplicar: això s'anomena algorisme en cascade.

+ +
És important notar que fins i tot si un conjunt de regles caracteritzat per un grup de selectors és una espècie d'abreviatura que reemplaça els conjunts de regles amb un sol selector cadascun, això no s'aplica a la validesa del conjunt de regles en si.
+
+Això dóna lloc a una conseqüència important: si un únic selector bàsic no és vàlid, com quan s'utilitza un pseudo-element o pseudo-classe desconegut, el selector sencer és invàlid i per tant s'ignora tota la regla (no és vàlida).
+ +

Sentències CSS

+ +

Els conjunts de regles són els blocs principals de construcció d'una fulla d'estil, que sovint només consisteixen en una gran llista d'elles. Però hi ha una altra informació que un autor web vol transmetre en la fulla d'estil, com el joc de caràcters, altres fulles d'estil externes per importar, descripcions de tipus de fonts o comptadors de llistes i molts més. Utilitzarà altres tipus específics de declaracions per fer-ho.

+ +

Una declaració és un bloc de construcció que comença amb qualsevol caràcter que no sigui l'espai i que finalitza en la primera clau de tancament o punt i coma (fora d'una cadena, no escapada i no s'inclou en un altre parell de {}, () o []).

+ +

css syntax - statements Venn diag.png

+ +

Hi ha dos tipus de declaracions:

+ + + +

Qualsevol declaració que no sigui un conjunt de regles (ruleset) o una at-rule no és vàlida i és ignorada.

+ +

Hi ha un altre grup de declaracions – les declaracions niades. Aquestes són declaracions que es poden utilitzar en un subconjunt específic de regles-at – les regles de grup condicional. Aquestes declaracions només s'apliquen si es compleix una condició específica: el contingut de la regla-at @media només s'aplica si el dispositiu en què el navegador s'executa coincideix amb la condició expressada; el contingut de la regla-at @document només s'aplica si la pàgina actual coincideix amb algunes condicions, i així successivament. En CSS1 i CSS2.1, només es podien utilitzar conjunts de regles dins de les regles de grup condicional. Això va ser molt restrictiu i aquesta restricció es va aixecar en CSS Conditionals Level 3. Ara, tot i que encara és experimental i no és compatible amb tots els navegadors, les regles de grup condicional poden contenir un rang de contingut més ampli: però també alguns conjunts de regles, però no totes les regles-at.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/type_selectors/index.html b/files/ca/web/css/type_selectors/index.html new file mode 100644 index 0000000000..d87b102ac3 --- /dev/null +++ b/files/ca/web/css/type_selectors/index.html @@ -0,0 +1,135 @@ +--- +title: Selector Type +slug: Web/CSS/Selectors_de_Tipus +tags: + - CSS + - HTML + - NeedsMobileBrowserCompatibility + - Node + - Reference + - Selectors +translation_of: Web/CSS/Type_selectors +--- +
{{CSSRef}}
+ +

El selector type CSS coincideix amb elements per nom del node. En altres paraules, selecciona tots els elements del tipus donat dins d'un document.

+ +
/* Tots els elements <a>. */
+a {
+  color: purple;
+}
+ +

Sintaxi

+ +
element { style properties }
+
+ +

Exemple

+ +

CSS

+ +
span {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<span>Here's a span with some text.</span>
+<p>Here's a p with some text.</p>
+<span>Here's a span with more text.</span>
+
+ +

Resultat

+ +

{{EmbedLiveSample('Example', '100%', 150)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}Sense canvis
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/universal_selectors/index.html b/files/ca/web/css/universal_selectors/index.html new file mode 100644 index 0000000000..6aa7931ef9 --- /dev/null +++ b/files/ca/web/css/universal_selectors/index.html @@ -0,0 +1,176 @@ +--- +title: Selector Universal +slug: Web/CSS/Selectors_Universal +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Reference + - Selectors +translation_of: Web/CSS/Universal_selectors +--- +
{{CSSRef}}
+ +

El selector universal CSS (*) coincideix amb elements de qualsevol tipus.

+ +
/* Selecciona tots els elements */
+* {
+  color: green;
+}
+ +

A partir de CSS3, l'asterisc pot ser usat en combinació amb {{cssxref("CSS_Namespaces", "namespaces")}}:

+ + + +

Sintaxi

+ +
* { style properties }
+ +

L'asterisc és opcional amb selectors simples . Per exemple , *.warning i .warning són equivalents.

+ +

Exemples

+ +

CSS

+ +
* [lang^=en] {
+  color: green;
+}
+
+*.warning {
+  color: red;
+}
+
+*#maincontent {
+  border: 1px solid blue;
+}
+
+.floating {
+  float: left
+}
+
+/* automatically clear the next sibling after a floating element */
+.floating + * {
+  clear: left;
+}
+
+ +

HTML

+ +
<p class="warning">
+  <span lang="en-us">A green span</span> in a red paragraph.</span>
+</p>
+<p id="maincontent" lang="en-gb">
+  <span class="warning">A red span</span> in a green paragraph.</span>
+</p>
+ +

Resultat

+ +

{{EmbedLiveSample('Examples')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}{{Spec2('CSS3 Selectors')}}Defineix el comportament pel que fa als espais de noms i afegeix suggeriments que permeten ometre el selector dins de pseudo-elements
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}{{Spec2('CSS2.1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}7{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Combinació amb suport d'espai de noms{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}981.3
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Combinació amb suport d'espai de noms{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
-- cgit v1.2.3-54-g00ecf