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/selectors_css/index.html | 156 --------------------- .../index.html | 69 --------- 2 files changed, 225 deletions(-) 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 (limited to 'files/ca/web/css/selectors_css') 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

- - -
-- cgit v1.2.3-54-g00ecf