W3docs
de
Anmelden

CSS :only-child Pseudo-Klasse

Nutze die :only-child CSS-Pseudo-Klasse, um das einzige Kind eines Elternelements auszuwählen und zu stylen. Beispiele und Erklärungen.

Die :only-child-Pseudo-Klasse trifft auf ein Element zu, das das einzige Kind seines Elternelements ist — also ein Element ohne Geschwister.

Das Element wird nur dann ausgewählt, wenn sein Elternelement keine weiteren Element-Kinder enthält. Die :only-child-Pseudo-Klasse ist funktional äquivalent zu :first-child:last-child (gleichzeitig erstes und letztes Kind zu sein bedeutet, dass nichts dazwischen liegt), und sie besitzt dieselbe Spezifität von (0,2,0), da sie als zwei Pseudo-Klassen zählt.

Diese Seite erklärt, worauf :only-child zutrifft, wie es sich von verwandten Selektoren wie :only-of-type unterscheidet, wie es in echten Layouts eingesetzt wird und welche häufigen Fallstricke es gibt.

Wann :only-child verwendet werden sollte

:only-child ist besonders nützlich, wenn ein Element anders aussehen soll, je nachdem ob es allein steht oder neben Geschwisterelementen. Häufige Anwendungsfälle:

  • Listen mit einem einzigen Element. Stil eine einelementige Liste anders (zum Beispiel Aufzählungszeichen ausblenden oder einen Trenner entfernen, der nur bei mehreren Elementen sinnvoll ist).
  • Karten- oder Grid-Layouts. Eine einzelne Karte kann zentriert oder gestreckt werden, während zwei oder mehr auf ein mehrspaltiges Layout umschalten.
  • Generierter Inhalt. Wenn Markup von einem CMS oder einer Template-Schleife erzeugt wird, ist oft nicht im Voraus bekannt, wie viele Geschwister erscheinen werden; :only-child lässt das Stylesheet automatisch darauf reagieren.

Unterschied zu :only-of-type

Dies ist die häufigste Verwechslungsquelle:

  • :only-child — trifft nur zu, wenn das Element das einzige Kind seines Elternelements ist, unabhängig vom Elementtyp. Wenn irgendein anderes Geschwisterelement vorhanden ist, trifft es nicht zu.
  • :only-of-type — trifft zu, wenn das Element das einzige seiner Art unter seinen Geschwistern ist, selbst wenn Geschwister anderer Typen vorhanden sind.
<div>
  <h2>Heading</h2>
  <p>Only paragraph here</p>
</div>

Im obigen Markup ist <p> kein :only-child (da <h2> ebenfalls ein Kind ist), aber es ist :only-of-type, weil es das einzige <p> ist.

Textinhalt zählt nicht

:only-child berücksichtigt nur Element-Geschwister. Gewöhnlicher Text um ein Element herum verhindert nicht, dass es zutrifft:

<p>Some text <strong>bold</strong> more text</p>

Hier trifft <strong> trotzdem auf strong:only-child zu, weil die umgebenden Textknoten keine Elemente sind. Leerzeichen und Kommentare werden ebenfalls ignoriert.

Version

Selectors Level 4

Selectors Level 3

Syntax

CSS :only-child Syntax

:only-child {
  css declarations;
}

Beispiel des :only-child-Selektors:

:only-child Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:only-child {
        background: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:only-child selector example</h2>
    <div>
      <p>Lorem ipsum is simply dumnmy text.</p>
    </div>
    <div>
      <p>Lorem ipsum is simply dummy text.</p>
      <p>Lorem ipsum is simply dummy text.</p>
    </div>
  </body>
</html>
Probier es selbst »

Beispiel des :only-child-Selektors für das <li>-Tag:

:only-child mit li-Tag Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul li {
        list-style-type: square;
      }
      li:only-child {
        color: blue;
        list-style-type: disc;
      }
    </style>
  </head>
  <body>
    <h2>:only-child selector example</h2>
    <ol>
      <li>
        One element
        <ul>
          <li>This list has just one element.</li>
        </ul>
      </li>
      <li>
        Two elements
        <ul>
          <li>This list has two elements.</li>
          <li>This list has two elements.</li>
        </ul>
      </li>
      <li>
        Three elements
        <ul>
          <li>This list has three elements.</li>
          <li>This list has three elements.</li>
          <li>This list has three elements.</li>
        </ul>
      </li>
    </ol>
  </body>
</html>
Probier es selbst »

Beispiel des :only-child-Selektors für das <em>-Tag:

:only-child mit em-Tag Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      em:only-child {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:only-child selector example</h2>
    <p>This is a <em>paragraph</em>.</p>
    <p>This is a paragraph.</p>
  </body>
</html>
Probier es selbst »

Beispiel des :only-child-Selektors für das <div>-Tag:

:only-child für das div-Tag Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div:only-child {
        color: #8ebf42;
        font-weight: bold;
      }
      div {
        display: block;
        margin: 6px;
        padding: 5px;
        outline: 1px solid #1c87c9;
      }
      div div {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h2>:only-child selector example</h2>
    <div>
      <div>I am an only child.</div>
    </div>
    <div>
      <div>I am the 1st sibling.</div>
      <div>I am the 2nd sibling.</div>
      <div>
        I am the 3rd sibling,
        <div>but this is an only child.</div>
      </div>
    </div>
  </body>
</html>
Probier es selbst »

Verwandte Selektoren

  • :only-of-type — das einzige Element seiner Art unter den Geschwistern.
  • :first-child und :last-child — wählt das erste oder letzte Kind aus; :only-child entspricht der Kombination beider.
  • :nth-child() — trifft Kinder anhand ihrer Position mittels einer Formel.

Übung

Übung
Die :only-child-Pseudo-Klasse trifft auf ein Element zu,
Die :only-child-Pseudo-Klasse trifft auf ein Element zu,
Was this page helpful?