alternare stili

[Ozne]

e' possibile alternare uno stile utilizzando css?

Mi spiego meglio...

sei nell'html ho impostato un class=pippo per tutti i div, nel css questo stile è impostato per dare lo sfondo ai div.
Volendo alternare il colore (o altro) senza creare un secondo div (e assegnare nell html il class corrispondente) che assegni un altro colore, si può fare qualcosa tramite css, senza scomodare javascript?

spero di essermi spiegato

[Ozne]

esempio:
html

Codice: Seleziona tutto

<div class=pippo>pappapperoperò</div>
<div class=pippo>alè oh oh</div>


css

Codice: Seleziona tutto

.pippo {background:#ccc;}
??
.pippo {background:#cc9999;}
??


risultato

alternato.jpg

[Andy94]

Ma tu hai due div sulla stessa pagina che, pur avendo la stessa classe devono avere stili diversi? O hai dei div e vuoi dare all'utente la possibilità di scegliersi lo stile?

Nel primo caso, devi impostare le regole CSS inline (attributo style="" stessa sintassi dei fogli di stile), oltre alla classe: prevarranno loro su quello che inserisci nei file appositi.
Nel secondo caso, senza JavaScript è impossibile. Alcuni esempi di come la tecnica può essere attuata li trovi qui:
http://www.centerkey.com/style/switcher/
http://www.alistapart.com/articles/alternate/

Ho notato una cosa nel tuo codice: ricorda sempre che si scrive class="pippo" e non senza apici come l'hai fatto tu.

[Ozne]

visto che ho creato due classi per allineare a destra o a sinistra l'immagine all'interno dei div, vorrei che in automatico si alternino i due stili (ora i div hanno lo stesso class), avendo come risultato che le immagini vengono allineate in alternanza a sinistra e a destra, questo però senza mettere mano all'html, ci sono molti box, quindi preferire un qualcosa di automatizzato... Nel tuo esempio dovrei editare a mano ogni class e style nella pagina, se ho capito bene.

ad esempio come questa pagina del forum, ogni post ha uno sfondo diverso, come viene gestito?

[Ozne]

si, gli apici me li sono dimenticati

[Andy94]

Viene ovviamente gestito con due classi diverse.
Poi, ovviamente, nel caso del nostro forum è PHP che si occupa di assegnare alternativamente le classi ai vari post placeholder.

Ora ho realizzato quello che intendi fare: devi usare due classi differenti (alle quali assegni i selettori che ti servono) quindi impostarle manualmente (o con uno script server side). Non hai modo di farlo con una classe sola.

[ssjx]

Se non hai paura di usare i CSS3 (quindi niente supporto sui vecchi browser) la soluzione esiste:

http://css.html.it/articoli/leggi/3305/le-pseudo-classi-strutturali/ (per la precisione a pagina 2

In alternativa puoi solo metter mano al markup della pagina (manualmente o tramite php che sia)

[ssjx]

Ah, dato che ci sono, a chi fosse interessato consiglio la lettura dei quattro articoli segnalati qui che spiegano in modo molto chiaro e completo questa parte dei CSS3

Imparerete come molte vecchie macchinose soluzioni possono essere oggi elegantemente evitate

[Andy94]

Senza che legga l'articolo, che comunque essendo di CSS3 approvo pienamente... Si tratta di una soluzione cross-browser? Sicuramente non è supportata dalle vecchie versioni di IE come la 7 o la 8, ancora da considerarsi usate, purtroppo.

[ssjx]

IE9 le supporta tutte mentre le versioni precedenti nessuna



Personalmente, trattandosi di un abbellimento grafico la cui assenza non snatura in alcun modo la pagina, sono fermamente convinto che usarli sia quasi un dovere... se poi si tratta di pagine personali (quindi non devi render conto a nessuno) il problema non me lo porrei proprio

E poi diciamocelo: se dopo 10 anni usi ancora IE6 metterai pure in conto qualche difettuccio di visualizzazione

[Ozne]

funziona, dei vecchi browser me ne frego, al limite vedranno tutte le immagini allineate a sinistra...

E poi è ora di aggiornarsi, e tirarsi fuori dalla botnet di turno

comunque devo risolvere un piccolo problema... l'alternanza viene spezzata da alcuni div che si frappongono... e non sempre il box successivo è diverso dal precedente, quando riprende dopo l'interruzione

Grazie!

edit

con ie 8 non funziona, ma poco male Tanto è solo un abbellimento e niente più...

ho provato a fare un testo con l'ombra su ie e mi è venuto il vomito, e ho dovuto anche sbattermi per trovare un codice alternativo.
Ma quando si decideranno di seguire gli standard?

certo che se potenziano il css sarà uno spettacolo in futuro!

[Andy94]

I CSS3 sono davvero una gran figata... Esistono alcuni siti che raccolgono certi fra i trick più belli in assoluto.
Un esempio potrebbe essere CSS3Watch.

[Ozne]

tempo fa finii su un sito dove c'erano giochi come labirinto fatti tutti in css... Da pazzi