Willst du lernen, wie du mit der CSS Pseudoklasse „only-of-type“ einzelne Elemente eines bestimmten Typs innerhalb eines Eltern-Elements ansprechen und stylen kannst? Dann bist du hier genau richtig! In diesem Tutorial zeigen wir dir, wie du die „only-of-type“ Pseudoklasse in CSS verwenden kannst und geben dir praktische Beispiele, um dir das Verständnis zu erleichtern.
Die „only-of-type“ Pseudoklasse wird verwendet, um das einzige Element eines bestimmten Typs innerhalb eines Eltern-Elements anzusprechen. Sie ist ähnlich wie die „only-child“ Pseudoklasse, jedoch berücksichtigt sie nur Elemente eines bestimmten Typs und ignoriert andere Elemente innerhalb des Eltern-Elements. Das macht sie besonders nützlich, wenn du ein bestimmtes Element ansprechen und stylen möchtest, ohne dabei andere Elemente zu beeinflussen.
Ein Beispiel: Wenn du eine Liste mit Links hast und nur den letzten Link in der Liste stylen möchtest, kannst du die „only-of-type“ Pseudoklasse verwenden, um nur den letzten Link auszuwählen. Wenn du stattdessen die „last-of-type“ Pseudoklasse verwendest, werden alle Elemente des letzten Typs innerhalb des Eltern-Elements angesprochen, nicht nur der letzte Link.
Um die „only-of-type“ Pseudoklasse in CSS zu verwenden, musst du sie mit einem Element-Selektor kombinieren. Hier ist ein Beispiel, das zeigt, wie du alle einzigen Paragrafen in einem Abschnitt mit einer anderen Hintergrundfarbe stylen kannst: