DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Der :first-of-type Selektor in CSS erlaubt es Ihnen, das erste Vorkommen eines Elements innerhalb seines Containers anzusprechen. Er ist in der CSS Selectors Level 3 Spezifikation als "strukturelle Pseudoklasse" definiert, was bedeutet, dass er verwendet wird, um Inhalte basierend auf ihrer Beziehung zu übergeordneten und Geschwisterelementen zu stylen.
Angenommen, wir haben einen Artikel mit einem Titel und mehreren Absätzen
<article>
<h1>A Title</h1>
<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<p>Paragraph 3.</p>
</article>Wir möchten den ersten Absatz größer machen, als eine Art "Leit"- oder Einführungsparagraph. Anstatt ihm eine Klasse zu geben, können wir :first-of-type verwenden, um ihn auszuwählen
p:first-of-type {
font-size: 1.25em;
}Die Verwendung von :first-of-type ist :nth-child sehr ähnlich, aber mit einem entscheidenden Unterschied: es ist weniger spezifisch. Im obigen Beispiel würde nichts passieren, wenn wir p:nth-child(1) verwendet hätten, da der Absatz nicht das erste Kind seines Elternelements (des <article>) ist. Dies enthüllt die Macht von :first-of-type: es zielt auf einen bestimmten Elementtyp in einer bestimmten Anordnung ab, in Bezug auf ähnliche Geschwister, nicht alle Geschwister.
Das vollständigere Beispiel unten zeigt die Verwendung von :first-of-type und einer verwandten Pseudoklassen-Selektoren, :last-of-type.
Weitere Ressourcen
- Verwandt mit: last-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 |
:first-of-type wurde im CSS Selectors Module 3 eingeführt, was bedeutet, dass alte Browserversionen es nicht unterstützen. Die Unterstützung moderner Browser ist jedoch tadellos, und die neuen Pseudoselektoren werden in Produktionsumgebungen häufig verwendet. Wenn Sie ältere Browserunterstützung benötigen, verwenden Sie entweder ein Polyfill für IE oder verwenden Sie diese Selektoren auf nicht-kritische Weise à la progressive enhancement, was empfohlen wird.
Vielen Dank für diesen Artikel. Ich habe gerade über Pseudoklassen durch Greg Rickabys Drop-Cap-Tutorial gelernt. Früher habe ich manuell Span-Tags für den ersten Buchstaben jedes Beitrags hinzugefügt, aber ich wollte eine einfache Möglichkeit, dies zu tun, die mir den Aufwand ersparen würde. Also habe ich einfach etwas first-of-type CSS hinzugefügt und es funktionierte perfekt.
Aber ich war besorgt über die Browserkompatibilität. Soweit ich das lese, ist diese Pseudoklasse ziemlich beliebt und funktioniert gut in den meisten Browsern, auch in älteren Versionen. Es scheint, dass nur IE8 ein gewisses Anliegen ist. Ist IE9 die aktuellste? Wenn ja, dann laufen wahrscheinlich noch viele Leute mit IE8, oder?
Würde etwas JavaScript helfen, Drop Caps in allen Browsern kompatibel zu machen?
Danke!!
Für IE 8 && Wenn Sie jQuery verwenden, können Sie verwenden
$('article p').first().css({fontSize:'1.25em'});Hallo,
Ich habe Probleme damit, dass first-of-type mit meinen Breadcrumb-Styles funktioniert
Sehen Sie die Fiddle-Demo hier http://jsfiddle.net/Lh4aq796/4/
Alles funktioniert, außer den :first-of-type und :first-of-type:before Elementen (letzte beiden Styles)
Ich habe mehrere Artikel gelesen und alle Hacks ausprobiert, aber nichts scheint zu funktionieren. Sieht so aus, als ob Span-Klassen zwischen dem a-Tag das Problem verursachen. Bitte helfen Sie bei der Behebung dieses Problems (das HTML-Markup wird vom Yoast SEO-Plugin generiert)
Bitte ändern Sie Ihren CSS-Code…..
#breadcrumbs {
margin-top: 20px;
margin-left:20px;
font-size:14px;
line-height: 30px;
color: #aaaaaa;
padding: 1px;
border: 1px solid #f0f0f0;
}
#breadcrumbs a {
display: block;
float: left;
background: #f0f0f0;
padding-right: 10px;
height: 30px;
margin-right: 31px;
position: relative;
text-decoration: none;
color: #aaaaaa;}
#breadcrumbs a:before {
content: “”;
display: block;
width: 0;
height: 0;
position: absolute;
top: 0;
left: -30px;
border: 15px solid transparent;
border-color: #f0f0f0;
border-left-color: transparent;
}
#breadcrumbs a:after {
content: “”;
display: block;
width: 0;
height: 0;
position: absolute;
top: 0;
right: -30px;
border: 15px solid transparent;
border-left-color: #f0f0f0;
}
#breadcrumbs a:hover {
background: #f36f21;
farbe: #fff;
text-decoration: none;}
#breadcrumbs a:hover:before {
border-color: #f36f21;
border-left-color: transparent;
}
#breadcrumbs a:hover:after {
border-left-color: #f36f21;
}
#breadcrumbs span span:first-of-type a {
padding-left: 15px;
}
#breadcrumbs span span:first-of-type a:before {
display: none;
}
Lol.
Ich bin mir nicht sicher, ob ich missverstehe, wie das funktionieren soll, oder ob es nicht so funktioniert, wie es soll.
Ich versuche, das letzte Element mit einer bestimmten Klasse anzusprechen (siehe Codepen). http://codepen.io/benratelade/pen/dGBYev
Leider funktioniert es so nicht; siehe diese SO-Antwort für Details, warum und eine Umgehungslösung.
Ich versuche, dies zu verwenden, um den ersten Absatz in einem Artikel zu stylen. Während ich in der Lage bin, den ersten Absatz im Artikel zu stylen, stelle ich fest, dass er sich auch auf das erste Absatz-Tag in jedem Kindelement anwendet, das sich ebenfalls im Artikel befindet.
Wie kann ich es verfeinern, damit es p-Tags im Artikel, die sich jedoch innerhalb von Kindelementen befinden, ignoriert?
Sie könnten auch verwenden
um den ersten Absatz auszuwählen, der auf ein h1-Tag innerhalb eines Artikels folgt.
Ich wusste bis jetzt nicht, dass man das + Element-darunter verwenden kann, um das erste Element nach einem anderen Element auszuwählen. Wie nennt man diese Art der Auswahl? Ich würde gerne mehr darüber lesen. Danke!
Vielen Dank! Das hat first-of-type-Selektoren wirklich gut erklärt, ich hatte Schwierigkeiten, das Konzept zu verstehen. Gut gemacht, jetzt weiß ich, wo ich gute Ressourcen finden kann. Und ist das wie ein Blog, auf dem ich ein Code-Snippet posten kann, mit dem ich Probleme habe, und dann versuchen die Leute, das Problem zu lösen? Das wäre so cool, ich suche schon lange nach einem solchen Ort. Vielen Dank.
Ich bin auf ein Problem mit Chrome gestoßen, der aktuellen Version zum Zeitpunkt dieses Kommentars, bei der die Verwendung des CSS-Attributselektors und des first-of-type-Selektors im selben Selektor keine Übereinstimmungen ergab, aber mit einem der beiden Selektoren oder dem first-of-type-Selektor Übereinstimmungen gefunden wurden. Das Ändern der Reihenfolge dieser Selektoren bei der Verwendung beider half nicht.
Hier ist mein Selektor
div#receipt table[print] tbody tr[header]:first-of-type th span