CSS :only-of-type Pseudo-Klasse – Learn CSS

Die CSS-Pseudoklasse :only-of-type trifft auf ein Element zu, das das einzige Element seines Typs unter den Kindern seines Elternelements ist. „Typ" bezeichnet hier den Tag-Namen (z. B. p, img oder h2), keine Klasse oder ID.

p:only-of-type trifft also auf ein <p> nur dann zu, wenn es der einzige Absatz innerhalb seines Elternelements ist — selbst wenn dieses Elternelement andere Elemente wie Überschriften, Listen oder Bilder enthält.

Diese Seite erklärt, wie :only-of-type funktioniert, wie es sich von :only-child unterscheidet und wann jedes der richtige Werkzeug ist.

Wann es zu verwenden ist

:only-of-type ist nützlich, wenn ein Element nur dann gestylt werden soll, wenn es allein unter gleichartigen Geschwisterelementen steht. Häufige Anwendungsfälle:

Einen Absatz in einer Karte hervorheben, wenn er der einzige Absatz dort ist.
Einen zusätzlichen Abstand zu einer Liste hinzufügen, wenn sie die einzige Liste in einem Abschnitt ist.
Ein einzelnes Bild anders stylen als Bilder, die in einer Galerie vorkommen (mehrere Bilder).

Erhält das Elternelement ein zweites Element desselben Typs, wird die Regel automatisch nicht mehr angewendet — kein JavaScript oder zusätzliche Klassen erforderlich.

`:only-of-type` vs. `:only-child`

Diese beiden Pseudoklassen sehen ähnlich aus, beantworten aber unterschiedliche Fragen:

:only-child trifft auf ein Element nur zu, wenn es überhaupt keine Geschwister hat (es ist das einzige Kind des Elternelements beliebigen Typs).
:only-of-type trifft auf ein Element zu, wenn es keine Geschwister desselben Typs hat — Geschwister anderen Typs sind erlaubt.

Betrachten Sie dieses Markup:

<div>
  <h2>Heading</h2>
  <p>Only paragraph.</p>
</div>

Hier ist das <p> kein :only-child (das <h2> ist ein Geschwisterelement), aber es ist das :only-of-type vom Typ p, daher trifft p:only-of-type auf es zu.

Version

Selectors Level 3

Selectors Level 4

Syntax

CSS :only-of-type Syntax

:only-of-type {
  css declarations;
}

Beispiel des :only-of-type-Selektors:

CSS :only-of-type Code-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:only-of-type {
        background: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:only-of-type selector example</h2>
    <div>
      <p>Lorem ipsum is simply dummy 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 »

Im obigen Beispiel enthält das erste <div> einen einzigen Absatz, sodass dieser Absatz den blauen Hintergrund erhält. Das zweite <div> enthält zwei Absätze, daher trifft p:only-of-type auf keinen von beiden zu und sie bleiben ungestylt.

Typen im selben Elternelement mischen

Da :only-of-type nur gleichartige Geschwister zählt, kann ein Elternelement mehrere Elemente unterschiedlicher Typen enthalten, und jeder „einzige" Typ trifft dennoch zu:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div :only-of-type {
        color: #1c87c9;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>The only heading</h2>
      <p>The only paragraph.</p>
      <span>The only span.</span>
    </div>
  </body>
</html>

Hier sind <h2>, <p> und <span> jeweils das einzige Element ihres Typs innerhalb des <div>, daher werden alle drei gestylt.

Browser-Unterstützung

:only-of-type wird von allen modernen Browsern unterstützt — Chrome, Firefox, Safari, Edge und Opera. Es ist Teil von Selectors Level 3, daher kann es in aktuellen Browsern ohne Fallback verwendet werden.

Übung

Was repräsentiert die Pseudoklasse ':only-of-type' in CSS?

':only-of-type' repräsentiert ein Element, das keine Geschwister des angegebenen Typs innerhalb seines Elterncontainers hat.':only-of-type' repräsentiert ein Zielelement, das das einzige Kind seines Typs innerhalb seines Elternelements ist.':only-of-type' repräsentiert ein Element mit einer bestimmten ID oder Klasse innerhalb seines Elterncontainers.':only-of-type' repräsentiert ein gestyltes Element, das das einzige Kind seines Typs innerhalb seines Dokuments ist.