: last-of-type funktioniert nicht

9

Ich habe ein HTML-Dokument mit dem abgekürzten HTML-Inhalt:

%Vor%

Mein erwartetes Verhalten ist, dass der CSS-Selektor .item.item-input:last-of-type das vierte label -Element und das letzte .item.item-input -Element des form -Vortrags übernimmt.

Was mache ich falsch?

    
Ian 24.04.2015, 23:57
quelle

3 Antworten

8

: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

  1. Umschließen Sie die ersten vier Elemente in einem separaten div, sodass Sie :last-of-type darin verwenden können.

  2. Lassen Sie jemanden (Server, lokale JS) das gewünschte Element mit einer bestimmten Klasse markieren und verweisen Sie darauf.

  3. 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.

  4. Geben Sie den betreffenden Elementen ein anderes Tag, wenn Sie dies verwalten können, und verwenden Sie dann last-of-type .

user663031 25.04.2015, 02:33
quelle
2

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.

    
Yatharth Agarwal 25.04.2015 00:06
quelle
1

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.

%Vor%

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.

    
Stickers 25.04.2015 01:07
quelle

Tags und Links