Selettore per ordine classi

[Hans Castorp]

Ciao a tutti.
Tramite php genero una serie di contenitori di cui vorrei impostare lo stile; l'html generato ha una struttura analoga a questa:

<div class="contenitore mele"></div>
<div class="contenitore mele"></div>
<div class="contenitore pere"></div>
<div class="contenitore arance"></div>
<div class="contenitore arance"></div>
<div class="contenitore arance"></div>
<div class="contenitore banane"></div>
<div class="contenitore banane"></div>

In sostanza, ciascun div ha assegnata la classe "contenitore" che determina uno stile univoco (i div infatti sono tutti uguali e flottano responsivamente), mentre le classi che ho nominato con il nome dei frutti mi servono per stilizzare in modo diverso colori del font, dei bordi e del background.
Dato che nel php ho necessità di inserire, nel corso del tempo, altre righe con contenitori con le stesse classi di frutta (o anche con altre classi), avrei necessità, tramite jquery, che css si applicasse a tutti i div che hanno la prima classe dell'ordine (senza specificare quale), a tutti i div che hanno la seconda classe dell'ordine (senza specificare quale) e così via.
In sostanza, si tratterebbe di utilizzare il selettore :nth(n) applicandolo ad un gruppo intero di elementi che hanno la stessa classe.
Ciò mi permetterebbe di poter inserire in php tutte le righe aggiuntive che desidero senza dover andare a modificare di volta in volta il css.
Sperando di essermi spiegato,
mando un caro saluto a tutti e un ringraziamento anticipiato.

[KillerWorm]

Ciao, non mi è chiaro l'obiettivo e il contesto in cui devi effettuare questa cosa, per cui personalmente mi viene difficile ragionarci sopra per arrivare ad una adeguata soluzione.

Due cose però: se dai già per scontato che ti serve una soluzione jQuery, hai sbagliato a postare nel forum CSS. Nel caso, fammi sapere se intendi mantenere questa strada, così sposto su JavaScript.

In alternativa, se pensi che si possa risolvere col solo CSS, una soluzione potrebbe essere quella di applicare alla fonte (cioè attraverso il PHP che genera la lista) una ulteriore classe per identificare il primo elemento di ogni ordine, o il secondo e così via.

Potresti quindi avere un risultato simile:

<div class="contenitore mele n1"></div>
<div class="contenitore mele n2"></div>
<div class="contenitore pere n1"></div>
<div class="contenitore arance n1"></div>
<div class="contenitore arance n2"></div>
<div class="contenitore arance"></div>
<div class="contenitore banane n1"></div>
<div class="contenitore banane n2"></div>

quindi ti basterà definire il CSS per le classi n1, n2 e via dicendo; sempre che io non abbia frainteso ciò che hai indicato.

[Hans Castorp]

Ciao, non mi è chiaro l'obiettivo e il contesto in cui devi effettuare questa cosa, per cui personalmente mi viene difficile ragionarci sopra per arrivare ad una adeguata soluzione.

Due cose però: se dai già per scontato che ti serve una soluzione jQuery, hai sbagliato a postare nel forum CSS. Nel caso, fammi sapere se intendi mantenere questa strada, così sposto su JavaScript.

In alternativa, se pensi che si possa risolvere col solo CSS, una soluzione potrebbe essere quella di applicare alla fonte (cioè attraverso il PHP che genera la lista) una ulteriore classe per identificare il primo elemento di ogni ordine, o il secondo e così via.

Potresti quindi avere un risultato simile:

<div class="contenitore mele n1"></div>
<div class="contenitore mele n2"></div>
<div class="contenitore pere n1"></div>
<div class="contenitore arance n1"></div>
<div class="contenitore arance n2"></div>
<div class="contenitore arance"></div>
<div class="contenitore banane n1"></div>
<div class="contenitore banane n2"></div>

quindi ti basterà definire il CSS per le classi n1, n2 e via dicendo; sempre che io non abbia frainteso ciò che hai indicato.

Grazie per la risposta.
Ho postato qui perché il quesito riguardava il css, anche se non credo esistano (ma posso sicuramente sbagliarmi) selettori di css che mi permettono di fare quello che voglio...

Proprio su quello che voglio ottenere non mi sono spiegato io in modo chiaro. In sostanza, ho definito una palette cromatica per una successione di colori di stile, la cui sequenza voglio che sia rispettata a prescindere dalle righe di php che definisco e alle relative classi.
Facciamo un esempio concreto, a partire dal codice che ho postato.
1. Voglio che la prima classe che appare (quella delle mele) abbia background e border gialli, che pere li abbia rossi, arance verdi e banane blu;
2. Nel caso avessi necessità di inserire prima di "mele" due div con classe "noccioline", vorrei che noccioline, essendo la prima, fosse gialla, e che - a scalare - mele diventasse rossa, pere diventasse verde, arance diventasse blu e così via.

In questo modo, a prescindere dalle righe che inserisco nel file csv e che richiamo tramite php, la palette cromatica non cambia.
Spero di essere stato più chiaro.
Grazie mille.

[KillerWorm]

Avevo capito male; il tuo ultimo esempio ha chiarito.

Come tu dici, non esiste attualmente un selettore del genere, che io sappia (poi potrei sbagliarmi anch'io).

La cosa è un po' complessa, così come è impostata, per essere risolta col solo CSS.

Tuttavia, una soluzione che mi viene in mente potrebbe essere quella di "introdurre" un elemento separatore nell'elenco di <div>, così da separare i vari gruppi (solo a livello strutturale). Potrebbe essere usato un semplice <br> opportunamente impostato con display:none. A questo punto sarà possibile usare il selettore :nth-of-type() assieme al combinatore ~ (general sibling) per identificare gli elementi dei singoli gruppi secondo l'indice specificato.

Qui un esempio:

<!DOCTYPE HTML>
<html>
   <head>
      <title>Esempio</title>
      <meta charset="utf-8">

      <style>
         .palette>br {
            display: none;
         }
         
         .contenitore {
            float: left;
            width: 60px;
            height: 40px;
            margin: 10px;
            border: 2px solid;
         }
         
         /*** PALETTE ***/ .contenitore { color: Yellow;    border-color: Yellow;   background: PapayaWhip; }
         br:nth-of-type(1)~.contenitore { color: Red;       border-color: Red;      background: LightPink; }
         br:nth-of-type(2)~.contenitore { color: Green;     border-color: Green;    background: GreenYellow; }
         br:nth-of-type(3)~.contenitore { color: Blue;      border-color: Blue;     background: SkyBlue; }
         br:nth-of-type(4)~.contenitore { color: Purple;    border-color: Purple;   background: Plum; }
         br:nth-of-type(5)~.contenitore { color: Brown;     border-color: Brown;    background: BurlyWood; }
         

      </style>
   </head>
   <body>
      <div class="palette">
         <div class="contenitore mele"></div>
         <div class="contenitore mele"></div>
         <br>
         <div class="contenitore pere"></div>
         <br>
         <div class="contenitore arance"></div>
         <div class="contenitore arance"></div>
         <div class="contenitore arance"></div>
         <div class="contenitore arance"></div>
         <br>
         <div class="contenitore banane"></div>
         <div class="contenitore banane"></div>
         <div class="contenitore banane"></div>
      </div>
   </body>
</html>

Come puoi vedere, nel CSS ho creato una palette con 6 definizioni (ma potranno essere aggiunte tutte quelle necessarie a seconda di quanti gruppi sono previsti a prescindere da quelli effettivamente presenti); per il primo gruppo non c'è bisogno di selezionare l'elemento separatore (br) perché questo non è presente all'inizio dell'elenco; infatti il semplice selettore .contenitore, subito dopo il commento /*** PALETTE ***/, identifica il primo gruppo (dove è sottinteso un indice 0); a seguire, con gli indici da 1 in poi, ci sono le altre definizioni.

Gli indici devono risultare in ordine sequenziale, dal minore al maggiore, per via del combinatore ~ che crea un override delle regole.

Chiaramente potrai aggiungere tutte le definizioni opportune associandole ad un relativo indice. Se i gruppi dovessero essere in numero maggiore delle definizioni nella palette, gli ultimi gruppi saranno formattati secondo la definizione con l'indice maggiore;

A questo punto, nel codice HTML potrai inserire tutte le righe o i gruppi che vuoi (separandoli opportunamente col <br>).
Ad esempio, le due noccioline prima delle mele:

...
      <div class="palette">
         <div class="contenitore noccioline"></div>
         <div class="contenitore noccioline"></div>
         <br>
         <div class="contenitore mele"></div>
         <div class="contenitore mele"></div>
         <br>
...

Vedi se può andare bene una soluzione del genere, cioè se ti è fattibile usare un separatore da inserire nel codice HTML.