Discussion :

[nixonne]

bonjour,

je vous pose la question car je n'arrive pas a trouver meme si je me doute qu'elle doit etre quelque part.

Etant débutant en CSS, je souhaiterai regrouper des valeur commune à différente class tout en gardant leur spécificité.

Exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div.coucou{
width:250px;
border-style: solid;
border-width: 1px;
text-align:center;
background-color:#FFFFCC;
}
 
div.essai{
width:250px;
border-style: solid;
border-width: 1px;
text-align:center;
background-color:#AAAAAA;
}

deviendrai:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
commun{
width:250px;
border-style: solid;
border-width: 1px;
text-align:center;
}
 
div.coucou{
background-color:#FFFFCC;
}
 
div.essai{
background-color:#AAAAAA;
}

Merci d'avance

Nixonne

[xmarabout]

Tu peux faire quelque chose comme ceci pour résoudre ton problème:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
div.coucou, div.essai{ 
width:250px; 
border-style: solid; 
border-width: 1px; 
text-align:center; 
} 
 
div.coucou{ 
background-color:#FFFFCC; 
} 
 
div.essai{ 
background-color:#AAAAAA; 
}

[francis m]

mais la solution de xmarabout est sur le fond pareille à la tienne
et je te rassure (ou pas du tout), il n'y en a pas vraiment d'autre
j'ai déjà essayé et je voulais faire la même chose, jamais de résultat vraiment probant

[Johnbob]

Tu peux faire quelque chose comme ceci pour résoudre ton problème:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
div.coucou, div.essai{ 
width:250px; 
border-style: solid; 
border-width: 1px; 
text-align:center; 
} 
 
div.coucou{ 
background-color:#FFFFCC; 
} 
 
div.essai{ 
background-color:#AAAAAA; 
}

En effet, c'est la solution.

Ou alors:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
div.coucou, div.essai{ 
width:250px; 
border-style: solid; 
border-width: 1px; 
text-align:center; 
background-color:#FFFFCC; 
} 
 
div.essai{ 
background-color:#AAAAAA; 
}

qui fonctionnera exactement pareil.

[ilood]

Salut,

Il est aussi possible d'indiquer plusieurs noms de classes dans le code html.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div.commun{
width:250px;
border-style: solid;
border-width: 1px;
text-align:center;
}
 
div.coucou{
background-color:#FFFFCC;
}
 
div.essai{
background-color:#AAAAAA;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div class="commun coucou">Hello World</div>
<div class="commun essai">Lorem ipsum ...</div>

[francis m]

ilood,

c'est bien comme proposition
sais-tu si cela fonctionne pour tous les navigateurs ?