Selettore CSS per selezionare il primo elemento di una determinata class

Sto provando a selezionare un primo elemento della class ‘A’ in un elemento con ID o class ‘B’. Ho provato una combinazione di selettori> + e first-child, poiché non è un primo elemento all’interno dell’elemento di class ‘B’. Ha funzionato, ma … sto cercando di sovrascrivere alcuni css predefiniti e non ho alcun controllo sul lato server e sembra che l’elemento di class ‘A’ sia talvolta generato in una posizione diversa. Ecco un’illustrazione:

  might have a different name  structure and element count might differ  our target  this shouldn't be affected  this shouldn't be affected   

A volte il nome della class ‘B’ differisce e anche gli elementi prima di ‘A’ differiscono. Quindi c’è un modo per selezionare la prima occorrenza di ‘A’ in un elemento ‘C’? Perché la class ‘C’ è sempre lì. Non posso usare i selettori +> e first-child poiché il percorso verso il primo elemento ‘A’ differisce, ma l’elemento ‘C’ è sempre lì e sarebbe un buon punto di partenza.

CSS3 fornisce la pseudo-class :first-of-type per selezionare il primo elemento del suo tipo in relazione ai suoi fratelli. Tuttavia non ha una pseudo-class :first-of-class -class.

Per ovviare al problema, se si conoscono gli stili predefiniti per gli altri elementi .A , è ansible utilizzare una regola di sovrascrittura con il combinatore generale di pari livello ~ per applicare gli stili a tali elementi. In questo modo, si “annulla” la prima regola.

La ctriggers notizia è che ~ è un selettore CSS3.
La buona notizia è che IE lo riconosce a partire da IE7, come i CSS2 > , quindi se sei preoccupato per la compatibilità del browser, l’unico “browser principale” su cui si verifica l’errore è IE6.

Quindi hai queste due regole:

 .C > * > .A { /* * Style every .A that's a grandchild of .C. * This is the element you're looking for. */ } .C > * > .A ~ .A { /* * Style only the .A elements following the first .A child * of each element that's a child of .C. * You need to manually revert/undo the styles in the above rule here. */ } 

Di seguito vengono illustrati gli stili applicati agli elementi:

 
Content
Content
Content
Content
Content
Content
Content
Content
  1. Questo elemento non ha class A Non sono applicate regole.

  2. Questo elemento ha class A , quindi viene applicata la prima regola. Tuttavia non ha altri elementi di questo tipo prima di esso, che il ~ selector richiede, quindi la seconda regola non viene applicata.

  3. Questo elemento ha class A , quindi viene applicata la prima regola. Arriva anche dopo che altri elementi con la stessa class sotto lo stesso genitore, come richiesto da ~ , quindi viene applicata anche la seconda regola. La prima regola è sovrascritta.