28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Ma page est composée de plusieurs "modules", un peu de cette manière: http://interface.eyecon.ro/demos/sort.html

Comme j'ai plusieurs habillages et deux tailles (big et small) de module, mon code ressemble à ça:
<div class="module1 moduleSmall">
<div class="titre">Titre</div>
Texte
</div>


Ceci me permet de décliner mes différents modules en 2 tailles tout en gardant la même syntaxe html. Par exemple:
<div class="module2 moduleBig">
<div class="titre">Titre</div>
Texte
</div>


Mon problème est que ma div "titre" est habillée différemment suivant qu'elle est dans un module "big" ou "small".
Comment puis je indiquer dans ma CSS que la classe ".titre" est différente suivant le couple de parent ?

Exemple de syntaxe (fausse) qui résume mon idée:
(.module1+.moduleSmall) .titre {...}
(.module1+.moduleBig) .titre {...}

(.module2+.moduleSmall) .titre {...}
(.module2+.moduleBig) .titre {...}
...


Merci d'avance de votre aide.
Bonjour,

La syntaxe exacte pour le sélecteur de classes multiples est:
.classe1.classe2

Donc dans ton cas:
.module1.moduleSmall .titre {...}

Attention: pas compris par IE6 (qui lira .moduleSmall .titre à la place, ignorant la première classe).

En passant, ton code a un petit relent de divite aigüe. Pourquoi une classe titre et pas un titre hN?
Salut,

Merci pour ton aide.
Il n'y a donc aucun moyen de faire ça pour ie6 ?

Pour ce qui est de la divite aigüe, je crois que c'est incurable docteur. Ma div "titre" (qui ne s'appelle pas vraiment "titre" d'ailleurs dans la vraie vie) contient d'autres éléments.

Encore merci.