Ihr Problem ist, dass Sie lesen :last-of-typeund denken, dass es als :last-of-classSelektor funktioniert , wenn es stattdessen speziell nur Elemente bedeutet . Leider gibt es keinen Selektor für die letzte Instanz einer Klasse.
Aus dem W3C :
Die :last-of-typePseudoklasse repräsentiert ein Element, das das letzte Geschwister seines Typs ist.
Sie haben p.visible:last-of-typeals Selektor Folgendes ausgewählt:
- untersucht jede Liste von Elementen (z. B. 1 oder mehrere Elemente; ein Kind ohne Geschwister kann noch darauf
:last-of-typeangewendet haben) in jedem enthaltenden Element in Ihrem HTML
- findet das letzte Element in dieser Liste
- prüft, ob es sich um ein
<p>Element handelt
- Überprüft, ob die Klasse
.visibledarauf ist.
Kurz gesagt, Ihr Selektor wendet seine Stile nur auf a an <p> , auf dem sich auch die Klasse befindet .visible. In Ihrem Markup haben nur die ersten beiden <p>Elemente diese Klasse. der dritte nicht.
Hier ist eine Demo verschiedener Stile zur Veranschaulichung:
p:last-of-type {
color: green;
}
p.visible:last-of-type {
color: red;
}
<p class="visible">First paragraph.</p>
<p class="visible">Second paragraph.</p>
<p>Third paragraph.</p>
Gemäß Ihrem Endziel,
Wie kann ich das letzte Element innerhalb des div WITH der Klasse .visible auswählen? Ich möchte dafür KEIN JavaScript verwenden.
Der einfachste und performanteste Weg besteht darin, die Art und Weise umzukehren, in der Sie versuchen, die Stile anzuwenden. Anstatt zu versuchen, zwei von drei Divs auszublenden, hat einer der auszublendenden Divs eine Klasse und der andere auszublendende Div keine Klasse, und der Div, den Sie anzeigen möchten, hat dieselbe Klasse wie der eine Div, den Sie ausblenden möchten die auch eine Klasse hat (siehe? das ist ziemlich verwirrend), mache folgendes:
- Fügen Sie die Klasse nur dem Element (oder der Gruppe von Elementen) hinzu, das kleiner ist.
- Legen Sie den Standardstil für das Element so fest, wie er von der Klasse nicht erreicht werden soll.
- Stellen Sie den Stil für die Klasse so ein, wie Sie es erreichen möchten.
p {
display: none;
}
.visible {
display: block;
}
<div>
<p>This should be hidden</p>
<p class="visible">This should be displayed</p>
<p>This should be hidden</p>
</div>
Wie Sie dieser Demo entnehmen können, sind HTML und CSS nicht nur einfacher, sondern es besteht auch der Vorteil, dass nur ein Klassen-Selektor anstelle eines *-of-typePseudo-Selektors verwendet wird, wodurch die Seite schneller geladen wird (mehr dazu weiter unten). .
Warum gibt es keinen von oder übergeordneten Selektor ?
Dies könnte möglicherweise die Geschwindigkeit vieler Webseiten beeinträchtigen, indem nur ein Klassenname dynamisch auf der Seite geändert wird.
Dave Hyatt nannte bei der Arbeit an der WebKit-Implementierung im Jahr 2008 einige Gründe, warum diese Implementierungen vermieden werden :
Mit übergeordneten Selektoren wird es extrem einfach, versehentlich ein dokumentweites Grovel zu verursachen. Menschen können und werden diesen Selektor missbrauchen. Es zu unterstützen bedeutet, den Menschen eine Menge Seil zu geben, mit dem sie sich aufhängen können.
Die traurige Wahrheit über CSS3-Selektoren ist, dass sie wirklich überhaupt nicht verwendet werden sollten, wenn Sie sich für die Seitenleistung interessieren. Wenn Sie Ihr Markup mit Klassen und IDs dekorieren und nur mit diesen übereinstimmen und dabei alle Verwendungen von Geschwister-, Nachkommen- und Kinder-Selektoren vermeiden, wird die Leistung einer Seite in allen Browsern erheblich verbessert.