Ist es möglich, mit dem CSS3-Selektor :first-of-type
das erste Element mit einem bestimmten Klassennamen auszuwählen? Ich war mit meinem Test nicht erfolgreich, also denke ich, dass es nicht so ist?
Der Code ( http://jsfiddle.net/YWY4L/ ):
p:first-of-type {color:blue}
p.myclass1:first-of-type {color:red}
.myclass2:first-of-type {color:green}
<div>
<div>This text should appear as normal</div>
<p>This text should be blue.</p>
<p class="myclass1">This text should appear red.</p>
<p class="myclass2">This text should appear green.</p>
</div>
quelle
.myclass1
Selektor würde jedes Element von auswählen.myclass1
. Der Selektor.myclass1 ~ .myclass1
verwendet den allgemeinen Geschwisterkombinator, um jedes Element mit der Klasse auszuwählen.myclass1
, die ein nachfolgendes Geschwister eines Elements mit einer Klasse von ist.myclass1
. Dies wird hier erstaunlich ausführlich erklärt .Der Entwurf CSS Selectors Level 4 schlägt vor, eine
of <other-selector>
Grammatik in den:nth-child
Selektor einzufügen . Auf diese Weise können Sie das n- te Kind auswählen, das einem bestimmten anderen Selektor entspricht:In früheren Entwürfen wurde eine neue Pseudoklasse verwendet
:nth-match()
, sodass Sie diese Syntax möglicherweise in einigen Diskussionen über die Funktion sehen:Dies wurde jetzt in WebKit implementiert und ist daher in Safari verfügbar. Dies scheint jedoch der einzige Browser zu sein, der dies unterstützt . Es sind Tickets für die Implementierung von Blink (Chrome) , Gecko (Firefox) und eine Anfrage zur Implementierung in Edge eingereicht , aber keine offensichtlichen Fortschritte bei diesen.
quelle
Dies ist nicht möglich, den CSS3-Selektor : first-of-type zu verwenden, um das erste Element mit einem bestimmten Klassennamen auszuwählen.
Wenn das Zielelement jedoch ein vorheriges Element-Geschwister hat, können Sie die Negations-CSS-Pseudoklasse und die benachbarten Geschwister-Selektoren so kombinieren, dass sie mit einem Element übereinstimmen, das nicht sofort ein vorheriges Element mit demselben Klassennamen hat:
Beispiel für einen vollständigen Arbeitscode:
quelle
Ich habe eine Lösung für Ihre Referenz gefunden. Wählen Sie aus einigen Gruppendivs aus einer Gruppe von zwei gleichen Klassendivs die erste aus
Übrigens weiß ich nicht warum
:last-of-type
, aber es:first-of-type
funktioniert nicht.Meine Experimente zu jsfiddle ... https://jsfiddle.net/aspanoz/m1sg4496/
quelle
Dies ist ein alter Thread, aber ich antworte, weil er immer noch ganz oben in der Liste der Suchergebnisse steht. Jetzt, da die Zukunft gekommen ist, können Sie den Pseudo-Selektor: n-tes Kind verwenden.
Der Pseudo-Selektor: nth-child ist mächtig - die Klammern akzeptieren sowohl Formeln als auch Zahlen.
Mehr hier: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
quelle
Als Fallback-Lösung können Sie Ihre Klassen in ein übergeordnetes Element wie folgt einschließen:
quelle
Ich bin mir nicht sicher, wie ich das erklären soll, aber ich bin heute auf etwas Ähnliches gestoßen. Nicht in der Lage zu setzen,
.user:first-of-type{}
während gut.user:last-of-type{}
funktioniert. Dies wurde behoben, nachdem ich sie in eine Div ohne Klasse oder Styling eingewickelt hatte:https://codepen.io/adrianTNT/pen/WgEpbE
quelle
Sie können dies tun, indem Sie jedes Element der Klasse auswählen, das das Geschwister derselben Klasse ist, und es invertieren, wodurch so ziemlich jedes Element auf der Seite ausgewählt wird. Sie müssen es also erneut von der Klasse auswählen.
z.B:
quelle
Funktioniert einfach
:first
für mich, warum wird das noch nicht erwähnt?quelle
:first
ist eine Pseudoklasse, die sich auf das Drucken bezieht.