|CSS|Definition Appel Sous-Classes en cascade [Résolu/Fermé]

Signaler
-
 Meeeee -
Bonjour,


Voilà il se trouve que j'ai un peu de temps à tuer donc j'ai décidé d'apprendre le CSS.
Mon problème :
Je définie, par exemple une classe : .bouton { background-color:red; }

- Comment faire pour définir une autre sous-classe (enfant de .bouton !) qui hérite des propriétés de .bouton. Un truc genre : .bouton.actif { color:yellow }
?
- Et comment appeler ou appliquer .actif à un <span> par exemple
(pour avoir au final un texte jaune sur fond rouge)
?


D'avance merci.



7 réponses

Messages postés
18439
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
9 septembre 2020
4 215
Salut.

Il suffit de mettre les différentes classes à utiliser dans l'attribut class, en les séparant par un espace.

Les propriétés des classes utilises se fusionneront.

Par exemple :
<span class="gras italique">Salut</span> 

.gras { font-weight: bold; } 
.italique { font-style: italic; }

Ton ordinateur ne fait pas ce que tu veux ... mais ce que tu lui dis de faire.
Ok ça marche merci pour ta réponse avion-f16
mais j'ai déjà lu quelque part qu'on pouvait faire des trucs comme :

.gras .italique {...}


mais bien-sur je n'ai pas tout capté !
et si cette syntaxe est exacte comment peut-on appliquer .italique à un <span> par exemple ?


A vous, merci...
Messages postés
18439
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
9 septembre 2020
4 215
Ça permet de styler la classe "italique" uniquement dans un élément ayant la classe "gras".

Par exemple :
<p class="gras">
    Je suis en gras<br/>
    <span class="italique">Je suis en gras et italique</span>
</p>
Je suis en rien
<span class="italique">Je suis en rien</span>
OK c'est clair merci encore.

Donc si j'ai bien compris, pas moins de faire directement par exemple :

<p class="gras italique">...</p>

ou :

<p class="gras" class="italique">...</p>

?
Messages postés
18439
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
9 septembre 2020
4 215
Le premier code est correcte, les propriétés des classes "gras" et "italique" fuisonneront. Mais ça ne sera pas
.gras .italique { ... }
mais
.gras { ... }
.italique { ... }
Salut,

Oui, je comprends ! Pour résumer :
.gras .italique { ... }

veut dire que .italique ne s'applique que sur les objets ayant le style .gras c'est bien ça non ?
Je trouve juste, un peu bizarre qu'on soit obligé de faire :
<span class="gras">
<span class="italique">Un texte</span>
</span>

donc un span dans un span ! pour "appeler" .italique !


Un petit commentaire peut etre... ? merci encore
Messages postés
18439
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
9 septembre 2020
4 215
C'est exacte, mais perso, je créerais les deux classes séparément et je les mettrais sur le même span.
Salut,

OK ça marche je fais comme ça moi aussi

@+
Merci ;)