DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Der :last-of-type Selektor ermöglicht es Ihnen, das letzte Vorkommen eines Elements innerhalb seines Containers anzusprechen. Er ist in der CSS Selectors Level 3 Spezifikation als „strukturelle Pseudoklasse“ definiert, was bedeutet, dass er zum Stylen von Inhalten basierend auf seiner Beziehung zu übergeordneten und Geschwisterinhalten verwendet wird.
Nehmen wir an, wir haben einen Artikel mit einem Titel, mehreren Absätzen und einem Bild
<article>
<h1>A Title</h1>
Paragraph 1.
Paragraph 2.
Paragraph 3.
<img src="...">
</article>Wir möchten den letzten Absatz kleiner machen, um als Abschluss des Inhalts zu fungieren (ähnlich einer Editor-Notiz). Anstatt ihm eine Klasse zu geben, können wir :last-of-type verwenden, um ihn auszuwählen
p:last-of-type {
font-size: 0.75em;
}Die Verwendung von :last-of-type ist sehr ähnlich wie bei :nth-child, aber mit einem entscheidenden Unterschied: sie ist weniger spezifisch. Im obigen Beispiel würde nichts passieren, wenn wir p:nth-last-child(1) verwendet hätten, da der Absatz nicht das letzte Kind seines Elternelements ist (der
:last-of-type: es spricht einen bestimmten Elementtyp in einer bestimmten Anordnung an, in Bezug auf ähnliche Geschwister, nicht auf alle Geschwister.
Das vollständige Beispiel unten demonstriert die Verwendung von :last-of-type und eine verwandte Pseudoklassen-Selektor, :first-of-type.
Weitere Ressourcen
- Verwandt mit: first-of-type, nth-of-type, nth-last-of-type
- Mozilla Docs
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funktioniert | 3.2+ | Funktioniert | 9.5+ | 9+ | Funktioniert | Funktioniert |
:last-of-type wurde im CSS Selectors Module 3 eingeführt, was bedeutet, dass ältere Browserversionen es nicht unterstützen. Die Unterstützung moderner Browser ist jedoch tadellos, und die neuen Pseudoselektoren werden häufig in Produktionsumgebungen eingesetzt. Wenn Sie ältere Browserunterstützung benötigen, sollten Sie entweder ein Polyfill für IE verwenden oder diese Selektoren auf nicht-kritische Weise im Sinne von progressive enhancement verwenden, was empfohlen wird.
Ich finde es ziemlich seltsam, dass: .myClass:last-of-type nicht funktioniert, aber .myClass:first-of-type funktioniert! Ich frage mich, warum sie das nicht konsistent gehalten haben (Chrome Version 28.0)
Seltsam – ich habe mich geirrt! Es scheint tatsächlich wie erwartet zu funktionieren. Ich bin mir nicht sicher, was mein früheres Problem verursacht hat.
Ich habe dasselbe Problem. Bist du sicher, dass es ein Fehler war? Oder vielleicht ein Bug…
Bei mir auch..
Chrome 31.0.1612
"last-of-type" bezieht sich nur auf das Element, nicht auf Attribute…
Marcos hat Recht bezüglich last-of-type in Chrome, es funktioniert nicht, wenn ich mich auf eine Klasse beziehe. Danke dafür!
Danke! Ich hatte eine vage Erinnerung an diesen CSS-„Trick“ und musste Ihre Seite überprüfen. Ergebnis! :)
Es scheint, dass diese *-of-type-Selektoren (zumindest in Chrome) durch dynamisch generierte Elemente, die in den Elternelement eingefügt werden, gestört werden können. Wenn beispielsweise ein JavaScript-Code ein div in das Elternelement einfügt, verliert Ihr ursprüngliches last-of-type die Verfolgung des Elements, an das es gebunden war.
Schade, dass „last-of-type“ nicht korrekt implementiert ist.
Ein Typ sollte das sein, was vor
:last-of-typeangegeben wird. Wenn ich also „.January“ als „Typ“ habe, sollte „.January:last-of-type“ das letzte Vorkommen von Elementen mit der Klasse „.January“ treffen, was es nicht tut (mit Chrome 39.0.2171.95 (64-bit), OS X).Ich habe gerade einen Webdesign-Kurs begonnen und habe dasselbe Problem. Wie behebe ich es?
Ich habe das getestet und anscheinend gilt es NUR für HTML-Elemente und nicht nach Klassennamen, leider.
In der Spezifikation steht
Also wird etwas wie das hier nicht funktionieren
Aber das hier wird funktionieren
Sie irren sich. :last-of-type funktioniert einwandfrei mit Klassennamen und IDs. Der Begriff „Element“ in der von Ihnen zitierten Spezifikation bezieht sich nicht auf „Tag-Name“, sondern auf ein allgemeines „Element“. Wie dieses Element ausgewählt wird, ist irrelevant. Beispiel: https://jsfiddle.net/6cd83wb4/1/
@TylerH: Sie irren sich
https://jsfiddle.net/6cd83wb4/2/
@TylerH @Jan Hartmann Okay, Sie haben also gleichzeitig Recht und Unrecht, meine Herren. Das ist wirklich seltsames Verhalten, also halten Sie sich fest.
Es scheint, dass die Verwendung einer Klasse mit :last-of-type zu etwas führt, das ich nur als *.class:first-of-class beschreiben kann. Was passiert also genau? Nun, es bindet last-of-type an das HTML-Tag. Ob es sich um ein div oder ein p oder was auch immer handelt. Aber dieses „letzte“ Element muss auch das CSS-Tag haben, weshalb Jans Beispiel nichts Hervorgehobenes ergibt, da es sich zwar an die Klasse bindet, wie diese Regel mit dem Klassenselektor auf alle HTML-Elemente angewendet wird, aber das eigentliche :last-of-type an die HTML-Tags gebunden ist, sodass Sie nicht mehrere Klassen mit demselben HTML-Tag haben und mehrere :last-of-type-Hervorhebungen erwarten können.
Dies beeinträchtigt mich nicht, da ich Webkomponenten schreibe, was bedeutet, dass meine Element-Tag-Namen weitgehend eindeutig sind, was bedeutet, dass die Klassenselektor-Syntax sehr hilfreich für die Filterung von Stilen in Listen und ähnlichem ist.
Unten hat für mich funktioniert
.PFourTiles{
margin: 20px 13px 0px 0px;
}
.pseudo-primary{
.PFourTiles:last-of-type {
margin: 20px 0px 0px 0px;
}
}
Frage, ist es möglich, einen Link zu erstellen, der das neueste Bild aus dem neuesten Artikel einer bestimmten Kategorie anzeigt?
Ich möchte ein Bild in meinem Header haben, das sich ändert, und meine Leser haben die Möglichkeit, mehr zu lesen, wenn sie interessiert sind.
Zum Beispiel: Ich habe mehrere Kategorien und möchte eine Vorschau auf meiner Indexseite, aber nur das erste Bild des neuesten Artikels in einer dieser Kategorien..
schwer zu erklären, aber mehrere Blogger verwenden diese Art von Vorschau derzeit und ich möchte das auch, aber ich benutze kein WordPress, also muss ich einen Weg finden, das Problem zu lösen..
bitte helfen Sie!
(inthefrow.com, lilypebbles.co.uk, viviannadoesmakeup.com, heyclaire.com – Sie wissen schon, was ich meine..)
mit freundlichen Grüßen Kristina
Probieren Sie dies
.theList>p:nth-last-of-type(1) {
background: #ff0000;
}
wobei .theList Ihr Container-Element ist
Hier ist, was ich suche
.className a:first-of-type[href*=”string”]
Ich schaffe es nicht, es mit first-of-type oder last-of-type zum Laufen zu bringen. Hat jemand das zum Laufen gebracht, oder werden beide Selektoren einfach nicht unterstützt?
Zur Streitfrage, ob last-of-type bei Klassen funktioniert oder nicht, oder nur bei Elementen, warum nicht ein Element mit einer Klasse angeben? Das folgende hat für mich perfekt funktioniert – ich hoffe, das hilft jemandem.
Leider funktioniert es in diesem Beispiel nicht
https://jsfiddle.net/71xejb8o/1/
Ich denke, es funktioniert vielleicht in einigen Szenarien, aber nicht in anderen, abhängig von den umgebenden Elementen.