:last-of-type
entspricht einem Element, das das letzte Element seines Typs (Tags) innerhalb seiner übergeordneten Ebene (erster Ebene) ist. Sie wissen nicht, welche anderen Selektoren Sie kombiniert haben könnten, einschließlich Klassenselektoren wie .item-input
oder irgendetwas anderes.
Es gibt keine direkte Möglichkeit in CSS, um das zu erreichen, was Sie wollen, was als :last-of-selector
ausgedrückt werden könnte. Einige Alternativen, die vorgeschlagen wurden, sind
Umschließen Sie die ersten vier Elemente in einem separaten div, sodass Sie :last-of-type
darin verwenden können.
Lassen Sie jemanden (Server, lokale JS) das gewünschte Element mit einer bestimmten Klasse markieren und verweisen Sie darauf.
Andere Hacks, z. B. die Anzahl der zusätzlichen Elemente am Ende, die Sie überspringen möchten, fest verdrahten und :nth-last-of-type
verwenden.
Geben Sie den betreffenden Elementen ein anderes Tag, wenn Sie dies verwalten können, und verwenden Sie dann last-of-type
.
Anscheinend :last-of-type
(von den MDN-Dokumenten) kann nur mit Namespace und Typselektoren verwendet werden (Tag-Name-Selektoren wie input
).
Ich schlage vor, die HTML-Struktur so zu ändern, dass die Elemente .item-input
in eine <div>
eingeschlossen werden. Alternativ habe ich auch eine .last
-Klasse manuell hinzugefügt, um den Pseudo-Selektor zu ersetzen.
Das .class:last-of-type
ist nicht möglich. Die Pseudo-Klasse :last-of-type
CSS stellt das letzte gleichgeordnete Element mit dem angegebenen Elementnamen in der Liste der untergeordneten Elemente des übergeordneten Elements dar. Die korrekte Syntax lautet element:last-of-type
Sie könnten an :nth-last-of-type(n)
interessiert sein, Sie könnten dann den folgenden Selektor verwenden, um auf dieses Element zu zielen.
Der :nth-last-of-type(n)
Selektor entspricht jedem Element, das das n-te Kind eines bestimmten Typs seines Elternteils ist und vom letzten Kind zählt.
Sie müssen jedoch JavaScript verwenden, wenn Sie das Markup nicht bearbeiten können und die Anzahl der Elemente nicht festgelegt ist.