Problema css classi multiple con ie

**titusx** · 27-10-2009, 16:04

Ciao, chi mi può aiutare? Come sempre su firefox va e ie no.

<html>
<head>
</head>
<body>
<style type="text/css">
.classe1.classe5 .classe3{
font-size: 20pt;
color: red;
}
.classe2.classe4 .classe3{
font-size: 20pt;
color: blue;
}
.classe2.classe5 .classe3{
font-size: 20pt;
color: black;
}
.classe1.classe4 .classe3{
font-size: 20pt;
color: pink;
}
</style>

<div class="classe1 classe4"> classe1 classe4
<div class="classe3"> Classe3</div>
</div>
<div class="classe1 classe5"> classe1 classe5
<div class="classe3"> Classe3</div>
</div>
<div class="classe2 classe4"> classe2 classe4
<div class="classe3"> Classe3</div>
</div>
<div class="classe2 classe5">classe2 classe5
<div class="classe3"> Classe3</div>
</div>
</body>
</html>

Il mio problema è differenziare il div con class='classe3' a seconda di quale class padre appertiene.

Grazie per l'aiuto.

**Mich_** · 27-10-2009, 16:29

Quando si posta codice, e` sempre opportuno usare i tag VB, che si possono inserrie tramite i bottoni sopra l'area del testo.
Nel tuo caso avresti dovuto usare il bottone #.

Il fatto e` che non si capisce dove sono inseriti gli spazi nel CSS.
Probabilmente dovresti scrivere cosi`:

codice:

.classe1 .classe5 .classe3{...}
.classe2 .classe5 .classe3{...}
ecc.

mentre nel tuo codice non vedo lo spazio prima del secondo punto in ogni riga.

**titusx** · 27-10-2009, 16:37

codice:

<html>
<head>
</head>
<body>
<style type="text/css">
.classe1.classe5 .classe3{
font-size: 20pt;
color: red;
}
.classe2.classe4 .classe3{
font-size: 20pt;
color: blue;
}
.classe2.classe5 .classe3{
font-size: 20pt;
color: black;
}
.classe1.classe4 .classe3{
font-size: 20pt;
color: pink;
}
</style>

<div class="classe1 classe4"> classe1 classe4 
      <div class="classe3"> Classe3</div>
</div>
<div class="classe1 classe5"> classe1 classe5 
      <div class="classe3"> Classe3</div>
</div>
<div class="classe2 classe4"> classe2 classe4 
      <div class="classe3"> Classe3</div>
</div>
<div class="classe2 classe5">classe2 classe5
      <div class="classe3"> Classe3</div>
</div>
</body>
</html>

Scusa ma non mi ero accorto.

Il css è corretto.
".classe1.classe5" sta identificando quel div che ha entrambi le classi, e questo funziona, il problema è quando voglio dare uno style alla classe3 differenziandola a seconda del padre.

**Mich_** · 27-10-2009, 16:48

Ma perche` vuoi dare lo stile proprio a quell'elemento che ha ambedue le classi?

Le classi multiple le ho viste usare ancora, ma non in quel modo.

Esempio molto grezzo:

codice:

<div class="sfondorosso scritteblu">...</div>
...
<div class="sfondorosso scritteverdi">...</div>

CSS:
.sfondorosso {
  background: red;
}
.scritteblu {
  color: blue;
}
...

In pratica le classi multiple servono per definire attributi diversi (che possono essere in comune con altri elementi).

Nel tuo caso non puoi semplificare il CSS in questa direzione?

**titusx** · 27-10-2009, 16:52

Nel tuo caso cambia solo la seconda classe, nel mio cambia anche la prima.
Sono 4 le combinazioni.

**titusx** · 27-10-2009, 16:53

codice:

 <div class="sfondorosso scritteblu">...</div>
...
<div class="sfondorosso scritteverdi">...</div>

Nel tuo caso cambia solo la seconda classe, nel mio cambia anche la prima.
Sono 4 le combinazioni.

**Mich_** · 28-10-2009, 09:40

E` vero, ma il mio era un esempio grezzo.
Quello che volevo dire e` se si puo` eliminare la doppia classe nel selettore CSS.

Allora riformulo la domanda:
E proprio necessario definire il selettore

codice:

.classe1.classe5 .classe3{...}

Non si potrebbe usare una formulazione diversa, ad esempio qualcosa come

codice:

.classe1 .classe3. , classe5 .classe3{

Magari definendo le classi in modo diverso (sto pensando a dare un significato anche semantico alla singola classe)

Nota il mio e` solo un esempio, e prescinde da quello che vuoi fare.
E` solo una proposta di ridefinire le classi in modo da evitare la doppia classe (che evidentemente da` fastidio a qualche brwoser). In pratica dato che quella sintassi non piace, trovare una sintassi diversa (che tra l'altro sia anche corretta dal punto di vista semantico)

Discussione: Problema css classi multiple con ie

Strumenti discussione

Ricerca discussione

Visualizza

Problema css classi multiple con ie

Permessi di invio