: last-of-type nicht

Question

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

<div class="list"> 
    <form name="signupForm"> 
     <label class="item item-input"> 
     <input> 
     </label> 
     <label class="item item-input"> 
     <input> 
     </label> 
     <label class="item item-input"> 
     <input> 
     </label> 
     <label class="item item-input"> 
     <input> 
     </label> 
     <label class="item item-button"> 
     <input class="button button-block button-positive"> 
     </label> 
     <label class="item item-button"> 
     <input class="button button-block button-signup"> 
     </label> 
    </form> 
</div> 

Mein erwartetes Verhalten ist, dass der CSS-Selektor .item.item-input:last-of-type die 4.en label greifen Element und das letzte .item.item-input Element der form Eltern.

Was mache ich falsch?

Answer 1

:last-of-type entspricht einem Element, das das letzte Element seines Typs (Tags) innerhalb seiner übergeordneten Ebene (erster Ebene) ist. Es weiß nicht, oder 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 zu erreichen, was Sie wollen, was als :last-of-selector ausgedrückt werden könnte. Einige Alternativen, die vorgeschlagen wurden, umfassen

1. Wrap die ersten vier Elemente in einem separaten div, so können Sie :last-of-type innerhalb es tun.

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

3. Andere Hacks, z. B. Hard-Wiring die Anzahl der zusätzlichen Elemente am Ende, die Sie überspringen möchten, und verwenden Sie :nth-last-of-type.

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

Answer 2

Offenbar :last-of-type (von der MDN Docs) kann nur mit Namespace und type selectors (Tag-Namen-Selektoren wie input) verwendet werden.

Ich schlage vor, Ihre HTML-Struktur zu ändern, um die .item-input Elemente in einem <div> zu umhüllen. Alternativ habe ich auch eine .last Klasse manuell hinzugefügt, um den Pseudo-Selektor zu ersetzen.

Answer 3

Das Finden der .class:last-of-type ist nicht möglich. Die CSS-Pseudoklasse :last-of-type 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 Interesse an :nth-last-of-type(n) haben, könnten Sie dann den folgenden Selektor verwenden, um dieses Element zu targeten.

label:nth-last-of-type(3) { style properties } 

:nth-last-of-type(n) Der Selektor entspricht jedes Element, das das n-te Kind, von einem bestimmten Typ ist, die übergeordneten, von dem letzten Kind zu zählen.

Sie müssen jedoch Javascript verwenden, wenn Sie das Markup nicht bearbeiten können und die Anzahl der Elemente nicht festgelegt ist.