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

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>

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 .

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.

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>

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/

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

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>

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>

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>

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