|CSS|Definition Appel Sous-Classes en cascade

Résolu
Meeeee -  
 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

  1. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    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.
    0
  2. Meeeee
     
    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...
    0
  3. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    Ç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>
    0
  4. Meeeee
     
    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>

    ?
    0
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    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 { ... }
    0
  7. Meeeee
     
    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
    0
    1. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
       
      C'est exacte, mais perso, je créerais les deux classes séparément et je les mettrais sur le même span.
      0
  8. Meeeee
     
    Salut,

    OK ça marche je fais comme ça moi aussi

    @+
    Merci ;)
    0