Cibler une classe css à l'intérieur d'une autre classe css

Question

Bonjour, j'ai des problèmes avec certaines classes css dans joomla. J'ai deux divs dans un module, l'un est le wrapper class="wrapper", l'autre est le content class="content" . Le contenu est à l'intérieur du wrapper. Ce que j'essaie de faire, c'est de cibler un style css sur la classe content. Habituellement, je mettrais simplement .content {mon style info} dans la feuille de style, mais le problème est que cette classe est utilisée plusieurs fois dans la page. Dans le backend, vous pouvez attribuer un nom de classe à un module, j'ai donc appelé celui-ci .testimonials .

Pour ne pas altérer toutes les autres classes de contenu de la page, j'essaie de la cibler en mettant ceci :

.testimonials .content {my style info I am trying to apply} 

mais cela ne fonctionne pas, je sais que l'on peut faire cela avec des divs, donc

#testimonials .content {my style info I am trying to apply} 

Mais ma question est de savoir si cela peut être fait avec des classes ? si oui, quelque chose ne va pas car j'essaie d'utiliser ce qui suit :

.testimonials .content {font-size:12px; width:300px !important;}

Le contenu ne s'enroule pas et disparaît de la page à la fin du paragraphe, j'essaie donc de m'assurer que la classe de 1er niveau dans laquelle se trouve le contenu ne chevauche rien, ce qui est étrange c'est que même si je fixe la classe div dans laquelle se trouve le contenu à 50px, le texte ne s'enroule toujours pas, je ne suis donc pas sûr de le cibler correctement .

éditer >>>>>>>>>>..

Le code html créé par Joomla ressemble à ceci >>.

<div class="wrapper">
<div class="content">SOME CONTENT</div>
</div>

puis elle est enveloppée dans un million d'autres divs dans le bon vieux style Joomla.

J'ai donné au module la classe des témoignages, de sorte qu'il ressemble à quelque chose comme :

<div class="testimonials">
 <div class="wrapper">
  <div class="content">SOME CONTENT</div>
 </div>
</div>

EDIT 3 >>>>>>> OK, voici ce qu'il produit

<div class="testimonials">
   <div class="key4-block">
      <div class="module-title"><h2 class="title">Client Testimonials</h2></div>
         <div class="key4-module-inner">
            <div class="module-content">                                
               <script type="text/javascript">
                 RokStoriesImage['rokstories-184'].push('');
                 RokStoriesImage['rokstories-184'].push('');
                 RokStoriesImage['rokstories-184'].push('');
            </script>
         <div id="rokstories-184" class="rokstories-layout6 content-left"  >
           <div class="feature-block">        
            <div class="feature-wrapper">
              <div class="feature-container">
                 <div class="feature-story">
                    <div class="image-full" style="float: right">
                        <img src="/sos/" alt="image" />                            
                    </div>
                    <div class="desc-container">
                        <div class="wrapper">                                                        
                           <span class="content"><p>Arrived in under 30 mins and got my pride and joy home in one piece, the day it conked out on me.</p>
                           <p>- Mr A Another</p></span>                                
                        </div>
                    </div>
                </div>
                <div class="feature-story">
                   <div class="image-full" style="float: right">
                      <img src="/sos/" alt="image" />                            
                   </div>
                   <div class="desc-container">        
                      <div class="description">                                                        
                         <span class="feature-desc">
                            <p>Great Service ! , SOS came to the rescue me in no time at all and made my day.</p>
    <p>- a customer</p>
                          </span>                                
                      </div>
                   </div>
                </div>
              </div>
           </div>
        </div>
      </div>

EDIT 4 >>>>>>

Voici ce qu'il fait

Answer 1

Je ne sais pas exactement à quoi ressemble le code HTML (cela aiderait à trouver des réponses). S'il s'agit de

<div class="testimonials content">stuff</div>

il suffit alors de supprimer l'espace dans votre css. A la...

.testimonials.content { css here }

UPDATE :

Ok, après avoir vu HTML voir si cela fonctionne...

.testimonials .wrapper .content { css here }

ou simplement

.testimonials .wrapper { css here }

ou

.desc-container .wrapper { css here }

Les trois devraient fonctionner.

Answer 2

J'utilise des div au lieu de tableaux et je peux cibler des classes à l'intérieur de la classe principale, comme ci-dessous :

CSS

.main {
    .width: 800px;
    .margin: 0 auto;
    .text-align: center;
}
.main .table {
    width: 80%;
}
.main .row {
   / ***something ***/
}
.main .column {
    font-size: 14px;
    display: inline-block;
}
.main .left {
    width: 140px;
    margin-right: 5px;
    font-size: 12px;
}
.main .right {
    width: auto;
    margin-right: 20px;
    color: #fff;
    font-size: 13px;
    font-weight: normal;
}

HTML

<div class="main">
    <div class="table">
        <div class="row">
            <div class="column left">Swing Over Bed</div>
            <div class="column right">650mm</div>
            <div class="column left">Swing In Gap</div>
            <div class="column right">800mm</div>
        </div>
    </div>
</div>

Si vous souhaitez styliser exclusivement une "cellule" particulière, vous pouvez utiliser une autre sous-classe ou l'identifiant de la div, par exemple :

.main #red { color : red ; }

<div class="main">
    <div class="table">
        <div class="row">
            <div id="red" class="column left">Swing Over Bed</div>
            <div class="column right">650mm</div>
            <div class="column left">Swing In Gap</div>
            <div class="column right">800mm</div>
        </div>
    </div>
</div>

Answer 3

.parentClass {
      background:green;
      padding:20px:
}
.parentClass>.childClass {
      background:pink;
      padding:10px;
      margin:10px;
}

<div class="parentClass">
   Donec a sem pharetra, ultricies ipsum id
   <div class="childClass">
     Lorem ipsum dolor sit amet consectetur
   </div>
   Donec a sem pharetra, ultricies ipsum id
</div>