Selettore CSS3: primo di tipo con nome di classe?

È possibile utilizzare il selettore CSS3 :first-of-typeper selezionare il primo elemento con un determinato nome di classe? Non ho avuto successo con il mio test, quindi sto pensando che non lo sia?

Il codice ( 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>

No, non è possibile utilizzare un solo selettore. La :first-of-typepseudo-classe seleziona il primo elemento del suo tipo ( div, pecc). Usare un selettore di classe (o un selettore di tipo) con quella pseudo-classe significa selezionare un elemento se ha la classe data (o è del tipo dato) ed è il primo del suo tipo tra i suoi fratelli.

Sfortunatamente, CSS non fornisce un :first-of-classselettore che sceglie solo la prima occorrenza di una classe. Per ovviare al problema, puoi usare qualcosa del genere:

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

Spiegazioni e illustrazioni per la soluzione alternativa sono fornite qui e qui .

La bozza Selettori CSS livello 4 propone di aggiungere una of <other-selector>grammatica all'interno del :nth-childselettore . Ciò consentirebbe di scegliere il n ° figlio che corrispondono a un determinato altro selettore:

:nth-child(1 of p.myclass) 

Le bozze precedenti utilizzavano una nuova pseudo-classe, :nth-match()quindi potresti vedere quella sintassi in alcune discussioni sulla funzione:

:nth-match(1 of p.myclass)

Questo è stato ora implementato in WebKit ed è quindi disponibile in Safari, ma sembra essere l'unico browser che lo supporta . Ci sono biglietti archiviati per implementarlo Blink (Chrome) , Gecko (Firefox) e una richiesta per implementarlo in Edge , ma nessun progresso apparente su nessuno di questi.

Ciò non è possibile utilizzare il selettore CSS3 : first-of-type per selezionare il primo elemento con un determinato nome di classe.

Tuttavia, se l'elemento target ha un fratello di elemento precedente, è possibile combinare la pseudo-classe CSS di negazione e i selettori di fratello adiacente per abbinare un elemento che non ha immediatamente un elemento precedente con lo stesso nome di classe:

:not(.myclass1) + .myclass1

Esempio di codice di lavoro completo:

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>

Ho trovato una soluzione per il tuo riferimento. da alcuni div di gruppo selezionare dal gruppo di due div della stessa classe il primo

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

A proposito, non so perché funzioni :last-of-type, ma :first-of-typenon funziona.

I miei esperimenti su jsfiddle ... https://jsfiddle.net/aspanoz/m1sg4496/

Questo è un vecchio thread, ma sto rispondendo perché appare ancora in alto nell'elenco dei risultati di ricerca. Ora che il futuro è arrivato, puoi usare lo pseudo-selettore: nth-child.

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

Lo pseudo-selettore: nth-child è potente: le parentesi accettano sia le formule che i numeri.

Altro qui: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Come soluzione di fallback, puoi avvolgere le tue classi in un elemento padre come questo:

<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>

Non sono sicuro di come spiegarlo, ma mi sono imbattuto in qualcosa di simile oggi. Non essere in grado di impostare .user:first-of-type{}mentre .user:last-of-type{}funzionava bene. Questo è stato risolto dopo che li ho avvolti in un div senza alcuna classe o stile:

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>

Puoi farlo selezionando ogni elemento della classe che è il fratello della stessa classe e invertendolo, che selezionerà praticamente ogni elemento sulla pagina, quindi dovrai selezionare nuovamente dalla classe.

per esempio:

<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>

:firstFunziona semplicemente per me, perché non è ancora menzionato?