|CSS|Definition Appel Sous-Classes en cascade

Résolu
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. 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
    1. C'est exacte, mais perso, je créerais les deux classes séparément et je les mettrais sur le même span.
  2. 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 { ... }
    1. 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>

      ?
      1. Ç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>
        1. 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...
          1. 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.