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

La pseudo-class CSS :last-child representa l'últim element entre un grup d'elements germans.

+ +
/* Selecciona qualsevol <p> que sigui l'últim element entre els seus germans */
+p:last-child {
+  color: lime;
+}
+ +
+

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

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

Exemple bàsic

+ +

HTML

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

CSS

+ +
p:last-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:last-child {
+  border: 1px solid red;
+  color: red;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Styling_a_list')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS4 Selectors')}}No es requereix que els elements coincidents tinguin un pare.
{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS3 Selectors')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}9.0{{CompatOpera(9.5)}}3.2
No es requereix pare{{CompatChrome(57)}}{{CompatUnknown}}{{CompatGeckoDesktop("51")}}[1]{{CompatUnknown}}{{CompatOpera(44)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}9.0{{CompatOperaMobile(10)}}3.2
No es requereix pare{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatUnknown}}{{CompatGeckoMobile("51")}}[1]{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}
+
+ +

 

+ +

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

+ +

Vegeu també

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