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_first-child/index.html | 203 +++++++++++++++++++++++++ 1 file changed, 203 insertions(+) create mode 100644 files/ca/web/css/_colon_first-child/index.html (limited to 'files/ca/web/css/_colon_first-child') diff --git a/files/ca/web/css/_colon_first-child/index.html b/files/ca/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..7a226ce95e --- /dev/null +++ b/files/ca/web/css/_colon_first-child/index.html @@ -0,0 +1,203 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:first-child' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :first-child representa el primer element entre un grup d'elements germans.

+ +
/* Selecciona qualsevol <p> que sigui el primer element entre els seus germans */
+p:first-child {
+  color: lime;
+}
+ +
+

Nota: Com es va definir originalment, l'element seleccionat havia de tenir un pare. A partir dels Selectores Nivell 4, això ja no és necessari.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

Exemple bàsic

+ +

HTML

+ +
<div>
+  <p>This text is selected!</p>
+  <p>This text isn't selected.</p>
+</div>
+
+<div>
+  <h2>This text isn't selected: it's not a `p`.</h2>
+  <p>This text isn't selected.</p>
+</div>
+
+ +

CSS

+ +
p:first-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample('Basic_example', 500, 200)}}

+ +

Disseny d'una llista

+ +

HTML

+ +
<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3
+    <ul>
+      <li>Item 3.1</li>
+      <li>Item 3.2</li>
+      <li>Item 3.3</li>
+    </ul>
+  </li>
+</ul>
+ +

CSS

+ +
ul li {
+  color: blue;
+}
+
+ul li:first-child {
+  color: red;
+  font-weight: bold;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Styling_a_list')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS4 Selectors')}}No es requereix que els elements coincidents tinguin un pare.
{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS3 Selectors')}}Cap canvi.
{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}{{Spec2('CSS2.1')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic4.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}7[1]{{CompatOpera(9.5)}}4
No es requereix cap pare{{CompatChrome(57)}}{{CompatUnknown}}{{CompatGeckoDesktop("51")}}[2]{{CompatUnknown}}{{CompatOpera(44)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}7[1]{{CompatOperaMobile(10)}}3.1
No es requereix cap pare{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatGeckoMobile("51")}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer 7 no actualitza els estils quan s'afegeixen elements dinàmicament. A Internet Explorer 8, si un element s'insereix de forma dinàmica fent clic en un enllaç, l'estil del primer fill no s'aplica fins que l'enllaç no ha perdut el focus.

+ +

[2] Veure {{bug(1300374)}}.

+ +

Vegeu també

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