From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/ca/web/css/_colon_nth-child/index.html | 276 +++++++++++++++++++++++++++ 1 file changed, 276 insertions(+) create mode 100644 files/ca/web/css/_colon_nth-child/index.html (limited to 'files/ca/web/css/_colon_nth-child') diff --git a/files/ca/web/css/_colon_nth-child/index.html b/files/ca/web/css/_colon_nth-child/index.html new file mode 100644 index 0000000000..fee9b30c51 --- /dev/null +++ b/files/ca/web/css/_colon_nth-child/index.html @@ -0,0 +1,276 @@ +--- +title: ':nth-child' +slug: 'Web/CSS/:nth-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:nth-child' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :nth-child() CSS coincideix amb un o més elements basats en la seva posició entre un grup de germans.

+ +
/* Selecciona cada quart element entre qualsevol grup de germans */
+:nth-child(4n) {
+  color: lime;
+}
+
+ +

Sintaxi

+ +

La pseudo-class nth-child s'especifica amb un únic argument, que representa el patró per als elements coincidents.

+ +

Valors de paraules clau

+ +
+
odd
+
Representa elements, la posició numèrica dels quals, en una sèrie de germans és imparell: 1, 3, 5, etc.
+
even
+
Representa elements, la posició numèrica dels quals, en una sèrie de germans és parell: 2, 4, 6, etc.
+
+ +

Notació funcional

+ +
+
<An+B>
+
Representa elements, la posició numèrica dels quals, en una sèrie de germans coincideix amb el patró An+B, per a cada enter positiu o valor zero de n. L'índex del primer element és 1. Els valors A i B han de ser {{cssxref("<integer>")}}s.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

Exemple de selectors

+ +
+
tr:nth-child(odd) or tr:nth-child(2n+1)
+
Representa les files imparells d'una taula HTML: 1, 3, 5, etc.
+
tr:nth-child(even) or tr:nth-child(2n)
+
Representa les files parells d'una taula HTML: 2, 4, 6, etc.
+
:nth-child(5n)
+
Representa elements 5, 10, 15, etc.
+
:nth-child(3n+4)
+
Representa elements 4, 7, 10, 13, etc.
+
:nth-child(-n+3)
+
Representa els tres primers elements entre un grup de germans.
+
p:nth-child(n)
+
Representa cada element <p> entre un grup de germans. Això és el mateix que un simple selector p .
+
p:nth-child(1) or p:nth-child(0n+1)
+
Representa cada <p> aquest és el primer element entre un grup de germans. Això és el mateix que el selector {{cssxref(":first-child")}}.
+
+ +

Exemple detallat

+ +

HTML

+ +
<h3><code>span:nth-child(2n+1)</code>, WITHOUT an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 3, 5, and 7 are selected.</p>
+<div class="first">
+  <span>Span 1!</span>
+  <span>Span 2</span>
+  <span>Span 3!</span>
+  <span>Span 4</span>
+  <span>Span 5!</span>
+  <span>Span 6</span>
+  <span>Span 7!</span>
+</div>
+
+<br>
+
+<h3><code>span:nth-child(2n+1)</code>, WITH an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 5, and 7 are selected.<br>
+   3 is used in the counting because it is a child, but it isn't
+   selected because it isn't a <code>&lt;span&gt;</code>.</p>
+<div class="second">
+  <span>Span!</span>
+  <span>Span</span>
+  <em>This is an `em`.</em>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+</div>
+
+<br>
+
+<h3><code>span:nth-of-type(2n+1)</code>, WITH an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 4, 6, and 8 are selected.<br>
+   3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>,
+   not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects
+   children of that type. The <code>&lt;em&gt;</code> is completely skipped
+   over and ignored.</p>
+<div class="third">
+  <span>Span!</span>
+  <span>Span</span>
+  <em>This is an `em`.</em>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+</div>
+
+ +

CSS

+ +
html {
+  font-family: sans-serif;
+}
+
+span,
+div em {
+  padding: 5px;
+  border: 1px solid green;
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.first span:nth-child(2n+1),
+.second span:nth-child(2n+1),
+.third span:nth-of-type(2n+1) {
+  background-color: lime;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Detailed_example', 550, 550)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS4 Selectors')}}Afegeix la sintaxi del <selector> i especifica que els elements coincidents no són necessaris per tenir un pare.
{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS3 Selectors')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome(1)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.0{{CompatOpera(9.5)}}[1]3.1
sintaxi del <selector>{{CompatNo}}{{CompatUnknown}}{{CompatNo}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
No es requereix cap pare{{CompatChrome(57)}}{{CompatUnknown}}{{CompatGeckoDesktop("51")}}[3]{{CompatUnknown}}{{CompatOpera(44)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}[2]9.0{{CompatOperaMobile(9.5)}}[1]3.1
sintaxi del <selector>{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
No es requereix cap pare{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatUnknown}}{{CompatGeckoMobile("51")}}[3]{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}
+
+ +

[1] Opera no pot gestionar la inserció dinàmica dels elements

+ +

[2] Gecko encara no implementa aquesta funció. Vegeu {{bug(854148)}}.

+ +

[3] Vegeu {{bug(1300374)}}.

+ +

Vegeu també

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