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/de/web/css/_colon_only-child/index.html | 113 ++++++++++++++++++++++++++ 1 file changed, 113 insertions(+) create mode 100644 files/de/web/css/_colon_only-child/index.html (limited to 'files/de/web/css/_colon_only-child') diff --git a/files/de/web/css/_colon_only-child/index.html b/files/de/web/css/_colon_only-child/index.html new file mode 100644 index 0000000000..ac7ffcc7c0 --- /dev/null +++ b/files/de/web/css/_colon_only-child/index.html @@ -0,0 +1,113 @@ +--- +title: ':only-child' +slug: 'Web/CSS/:only-child' +tags: + - CSS + - CSS Pseudo-Klasse + - Layout + - Referenz + - Selektoren + - Web +translation_of: 'Web/CSS/:only-child' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die CSS Pseudo-Klasse :only-child  repräsentiert ein Element, welches das einzige Kindeelement innerhalb seines Elternelementes ist. Das ist das gleiche wie :first-child:last-child oder :nth-child(1):nth-last-child(1), nur mit einer geringeren Spezifizität.

+ +

Syntax

+ +
parent child:only-child {
+  property: value;
+}
+
+ +

Beispiele

+ +

Einfaches Beispiel

+ +
span:only-child {
+  color: red;
+}
+
+ +
<div>
+  <span>Dieser span ist das einzige Kind seines Elternteils</span>
+</div>
+
+<div>
+  <span>Dieser span ist eines von zwei Kindern seines Elternteils</span>
+  <span>Dieser span ist eines von zwei Kindern seines Elternteils</span>
+</div>
+
+ +

Ergebnis

+ +

{{EmbedLiveSample('Basic_example', '100%', 100)}}

+ +

Ein Beispiel für Listen

+ +
li li {
+  list-style-type: disc;
+}
+li:only-child {
+  color: #6699ff;
+  font-style: italic;
+  list-style-type: square;
+}
+ +
<ol>
+  <li>Erstens
+    <ul>
+      <li>Einziges Kind
+    </ul>
+  </li>
+  <li>Zweitens
+    <ul>
+      <li>Diese Liste hat zwei Elemente
+      <li>Diese Liste hat zwei Elemente
+    </ul>
+  </li>
+  <li>Drittens
+    <ul>
+      <li>Diese Liste hat drei Elemente
+      <li>Diese Liste hat drei Elemente
+      <li>Diese Liste hat drei Elemente
+    </ul>
+  </li>
+<ol>
+
+ +

Ergebnis

+ +

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

+ +
+

Spezifizierungen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifizierungStatusKommentar
{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS4 Selectors')}}Keine Änderung.
{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS3 Selectors')}}Ausgangs-Definition.
+ +

Browser-Kompatibilität

+ +{{Compat("css.selectors.only-child")}} -- cgit v1.2.3-54-g00ecf