CSS3-Selektor: First-of-Type mit Klassennamen?

230

Ist es möglich, mit dem CSS3-Selektor :first-of-typedas 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>

Adam Youngers
quelle

Antworten:

336

Nein, es ist nicht möglich, nur einen Selektor zu verwenden. Die :first-of-typepseudo-Klasse wählt das erste Element von seiner Art ( div, pusw.). Die Verwendung eines Klassenselektors (oder eines Typselektors) mit dieser Pseudoklasse bedeutet, ein Element auszuwählen, wenn es die angegebene Klasse hat (oder vom angegebenen Typ ist) und das erste seines Typs unter seinen Geschwistern ist.

Leider bietet CSS keinen :first-of-classSelektor, der nur das erste Auftreten einer Klasse auswählt. Um dieses Problem zu umgehen, können Sie Folgendes verwenden:

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }

Erklärungen und Abbildungen zur Problemumgehung finden Sie hier und hier .

BoltClock
quelle
7
Nein @justNik das funktioniert für mehrere Elemente. Der .myclass1Selektor würde jedes Element von auswählen .myclass1. Der Selektor .myclass1 ~ .myclass1verwendet 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 .
WebWanderer
tolle Problemumgehung! Es funktionierte gut für diese Scroll-Spy-Implementierung mit dem Kreuzungsbeobachter, bei der einige Abschnitte möglicherweise beide auf der Seite sichtbar sind, aber wir möchten nur den ersten aktiven in Fettdruck zeichnen.
Zavr
45

Der Entwurf CSS Selectors Level 4 schlägt vor, eine of <other-selector>Grammatik in den :nth-childSelektor einzufügen . Auf diese Weise können Sie das n- te Kind auswählen, das einem bestimmten anderen Selektor entspricht:

:nth-child(1 of p.myclass) 

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:

:nth-match(1 of p.myclass)

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.

Brian Campbell
quelle
102
Nur 10 Jahre, und ich kann das nutzen. Obwohl das Projekt, das ich nutzen würde, morgen gemacht werden muss.
Lajos Meszaros
1
: nth-match () wurde zugunsten neuer Funktionen für nth-child () gestrichen
nabrown
@ nabrown78 Danke für das Heads-up, die Antwort wurde aktualisiert, um aktuell zu sein.
Brian Campbell
19

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:

:not(.myclass1) + .myclass1

Beispiel für einen vollständigen Arbeitscode:

p:first-of-type {color:blue}
p:not(.myclass1) + .myclass1 { color: red }
p:not(.myclass2) + .myclass2 { 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>

lodz
quelle
9

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

p[class*="myclass"]:not(:last-of-type) {color:red}
p[class*="myclass"]:last-of-type {color:green}

Übrigens weiß ich nicht warum :last-of-type, aber es :first-of-typefunktioniert nicht.

Meine Experimente zu jsfiddle ... https://jsfiddle.net/aspanoz/m1sg4496/

Konstantin
quelle
Dies funktioniert nicht wie erforderlich, wie bereits aus der Geige ersichtlich ist. Das einzige, was dies tut, ist nicht das letzte Div auszuwählen, wenn es nicht die Klasse hat.
Marten Koetsier
6

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.

p:nth-child(1) { color: blue; }
p.myclass1:nth-child(1) { color: red; }
p.myclass2:nth-child(1) { color: green; }

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

TDavison
quelle
6
Ja, ich denke nicht, dass das funktioniert, zumindest nicht in Chrome ... jsfiddle.net/YWY4L/91
Adam Youngers
2
Was meinst du mit "jetzt wo die Zukunft gekommen ist"? Dies funktioniert zum Zeitpunkt des Schreibens nur in Safari.
Alejandro García Iglesias
4

Als Fallback-Lösung können Sie Ihre Klassen in ein übergeordnetes Element wie folgt einschließen:

<div>
    <div>This text should appear as normal</div>
    <p>This text should be blue.</p>
    <div>
        <!-- first-child / first-of-type starts from here -->
        <p class="myclass1">This text should appear red.</p>
        <p class="myclass2">This text should appear green.</p>
    </div>
</div>
Gediminas Bivainis
quelle
0

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

<style>
.user{
  display:block;
  background-color:#FFCC00;
}

.user:first-of-type{
  background-color:#FF0000;
}
</style>

<p>Not working while this P additional tag exists</p>

<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>

<p>Working while inside a div:</p>

<div>
<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>
</div>
adrianTNT
quelle
0

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:

<style>
    :not(.bar ~ .bar).bar {
        color: red;
    }
<div>
    <div class="foo"></div>
    <div class="bar"></div> <!-- Only this will be selected -->
    <div class="foo"></div>
    <div class="bar"></div>
    <div class="foo"></div>
    <div class="bar"></div>
</div>
Jonathan.
quelle
-5

Funktioniert einfach :firstfür mich, warum wird das noch nicht erwähnt?

Eduard Ge
quelle
3
:firstist eine Pseudoklasse, die sich auf das Drucken bezieht.
user247702