28120 sujets

CSS et mise en forme, CSS3

[résolu]Cumuler les class

Bonjour,

Je voudrais savoir s'il est possible d'attribuer plusieurs class a des éléments et s'il est ensuite possible de définir des regles css en fonction de différentes combinaisons.

Si on a les class="classA" ou "classB" et class "class1" ou "class2",

est il possible d'établir des regles de la forme:


.classA ET .class1 {blablalba;}
.classB ET class1 {blobloblob;}
.classB ET class 2 {blibliblib;}
etc..

Et si oui, quelle en est la syntaxe ?

J'ai tenté

.classA .class1 {blablalba;}


Mais le css ne s'applique pas du tout
et


.classA [b],[/b] .class1 {blablalba;}


Qui ne fonctionne pas non plus :X

Merci d'avance !

Le ET est evidemment incorrect Smiley cligne
Modifié par xis (06 Nov 2007 - 18:22)
Salut xis Smiley cligne ,

ça me semble un peu compliqué comme façon d'aborder les choses Smiley rolleyes : on peut cumuler les class sur un même élément et le principe des css est d'affecter les attributs en cascade donc normalement il est inutile d'avoir besoin de faire des conditions... Tu aurais un exemple précis de ce que tu veux faire ?

Sinon le principe est :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.classA {
	font-style:italic;
}

.classB {
	font-style:normal;
}

.class1 {
	color:red;
}

.class2 {
	color:blue;
}
-->
</style>
</head>
<body>
<p class="classA class1">classA class1</p>
<p class="classA class2">classA class2</p>
<p class="classB class1">classB class1</p>
<p class="classB class2">classB class2</p>
</body>
</html>

A+

@commodo > ce que tu écris veut dire : ce qui suit est valable pour .class1 et pour .class2 mais ça ne veut pas dire (SI .class1 ET .class2) Smiley smile
Modifié par Heyoan (06 Nov 2007 - 18:00)
Oui, il s'agit d'appliquer des couleurs ds un tableau:

HTML

<table id="prix">
 <tr>
 <th class="bsse" class="smpl">Basse saison</th> <th class="hte">Haute saison</th><th></th>
 </tr>
 <tr>
 <td class="bsse", class="smpl">57€</td><td class="hte">65€</td><td>Chambre classique simple</td>
 </tr>
 <tr>
 <td class="bsse", class="smpl">65€</td><td class="hte">75€</td><td>Chambre famille simple</td>
 </tr>
 <tr>
 <td class="bsse", class="smpl">73€</td><td class="hte">83€</td><td>Chambre prestige simple</td>
 </tr>

 <tr>
 <td class="bsse", class="dbl">79€</td><td class="hte">89€</td><td>Chambre 1 personne &frac12; pension</td>
 </tr>
 <tr>
 <td class="bsse", class="dbl">109€</td><td class="hte">75€</td><td>Chambre 2 personnes &frac12; pension</td>
 </tr>
 <tr>
 <td class="bsse", class="dbl">139€</td><td class="hte">83€</td><td>Chambre 3 personnes &frac12; pension</td>
 </tr>
 
</div>
</table>


CSS:


#prix {
background: green;
text-align: right;
width: 480px;
border: solid 1px black;
}

th.bsse {background: blue;}
th.hte {background: red;}

td.smpl td.bsse {background: cyan;}
td.smpl td.hte {background: pink;}

td.dbl td.bsse {bacground: bleupétant;}
td.dbl td.hte {background: rougequipete;}


Ce quie je cherche a faire étant:"SI class=bsse ET si class=smpl ALORS : background:cyan"

etc
Modifié par xis (06 Nov 2007 - 18:11)
Comme le dit Heyoan la syntaxe n'est pas :

class="classe1" class="classe2"


mais :

class="classe1 classe2"


Mais ca reste tout de meme etrange comme facon d'aborder ton probleme.
xis a écrit :
Ce quie je cherche a faire étant:"SI class=bsse ET si class=smpl ALORS : background:cyan"

Bon ben autant pour moi, il s'agit bien d'un cas "spécial" et du coup la solution est dans le lien donné par Papyjo :
.bsse.smpl { background: cyan; }
Smiley cligne
Sujet clos
Aller à