CSS/Selektoren/Pseudoklasse/strukturelle Pseudoklasse/only-of-type

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Der Selektor :only-of-type() spricht ein Element dann an, wenn es das einzige Kind dieses Typs seines Elternelementes ist.

  • CSS 3.0
  • IE 9
  • Firefox
  • Chrome
  • Safari
  • Opera
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS-Beispiel: Pseudoklasse only-of-type</title> <style> body { width: 30em; } em { font-weight: bold; } em:only-of-type { color: red; } </style> </head> <body> <h1>Die Pseudoklasse <code>only-of-type()</code></h1> <p>Dies ist ein Absatz mit <em>wichtigen</em> und <em>bemerkenswerten</em> Inhalten.</p> <p>In diesem Absatz steckt <em>nur eine</em> <b>wichtige</b> Information.</p> </body> </html>
In diesem Beispiel werden alle em-Elemente fett formatiert; das 3. erhält zusätzlich die Schriftfarbe rot, weil es das einzige em-Element seines Absatzes ist. Dass es noch ein b-Element als Geschwisterelement besitzt, ist nicht von Bedeutung, verhindert jedoch das Ansprechen durch em:only-child.
Beachten Sie: :only-of-type ist identisch zu :first-of-type:last-of-type, :first-of-type:nth-last-of-type(1), :nth-of-type(1):last-of-type sowie :nth-of-type(1):nth-last-of-type(1) allerdings mit anderer Spezifität.

Weblinks[Bearbeiten]