title: Target a css class inside another css class
body: <p>Hi I am having problems with some css classes in joomla. I have two divs in a module, one is the wrapper class=&quot;wrapper&quot;, the other is the content class=&quot;content&quot; . Content is inside wrapper. What I am trying to do is target a css style on the content class. Usually I would just put .content {my style info} in the style sheet, but the problem is that this class is used several times throughout the page. So in the backend, you can assign a module a class name, so I have called this one .testimonials .</p>
  <p>So that I dont alter all the other content classes on the page I am trying to target it by putting this :</p>
  <pre><code>.testimonials .content {my style info I am trying to apply} 
  </code></pre>
  <p>but it is not working, I know you can do this with divs, so</p>
  <pre><code>#testimonials .content {my style info I am trying to apply} 
  </code></pre>
  <p>but my question is can this be done with classes ?, if so something is going wrong as I am trying to use the following :</p>
  <pre><code>.testimonials .content {font-size:12px; width:300px !important;}
  </code></pre>
  <p>as for some reason the content is not wrapping and just vanishes off the page at the end of the paragraph, so I am trying to make sure the 1st level class the content is sitting is not overlapping anything, the odd thing is even if I fix the div class the content sits in to 50px it still wont wrap the text, so I am not sure if I am targeting it right ?.</p>
  <p>edit &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;..</p>
  <p>The html Joomla is creating basically looks like this &gt;&gt;</p>
  <pre><code>&lt;div class=&quot;wrapper&quot;&gt;
  &lt;div class=&quot;content&quot;&gt;SOME CONTENT&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>then it is wrapped in a million other divs in the good old Joomla style.</p>
  <p>I have given the module the class of testimonials, so it ends up looking something like :</p>
  <pre><code>&lt;div class=&quot;testimonials&quot;&gt;
   &lt;div class=&quot;wrapper&quot;&gt;
    &lt;div class=&quot;content&quot;&gt;SOME CONTENT&lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>EDIT 3 &gt;&gt;&gt;&gt;&gt;&gt;&gt;
  OK, this is what it is spitting out</p>
  <pre><code>&lt;div class=&quot;testimonials&quot;&gt;
     &lt;div class=&quot;key4-block&quot;&gt;
        &lt;div class=&quot;module-title&quot;&gt;&lt;h2 class=&quot;title&quot;&gt;Client Testimonials&lt;/h2&gt;&lt;/div&gt;
           &lt;div class=&quot;key4-module-inner&quot;&gt;
              &lt;div class=&quot;module-content&quot;&gt;                                
                 &lt;script type=&quot;text/javascript&quot;&gt;
                   RokStoriesImage['rokstories-184'].push('');
                   RokStoriesImage['rokstories-184'].push('');
                   RokStoriesImage['rokstories-184'].push('');
              &lt;/script&gt;
           &lt;div id=&quot;rokstories-184&quot; class=&quot;rokstories-layout6 content-left&quot;  &gt;
             &lt;div class=&quot;feature-block&quot;&gt;        
              &lt;div class=&quot;feature-wrapper&quot;&gt;
                &lt;div class=&quot;feature-container&quot;&gt;
                   &lt;div class=&quot;feature-story&quot;&gt;
                      &lt;div class=&quot;image-full&quot; style=&quot;float: right&quot;&gt;
                          &lt;img src=&quot;/sos/&quot; alt=&quot;image&quot; /&gt;                            
                      &lt;/div&gt;
                      &lt;div class=&quot;desc-container&quot;&gt;
                          &lt;div class=&quot;wrapper&quot;&gt;                                                        
                             &lt;span class=&quot;content&quot;&gt;&lt;p&gt;Arrived in under 30 mins and got my pride and joy home in one piece, the day it conked out on me.&lt;/p&gt;
                             &lt;p&gt;- Mr A Another&lt;/p&gt;&lt;/span&gt;                                
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;feature-story&quot;&gt;
                     &lt;div class=&quot;image-full&quot; style=&quot;float: right&quot;&gt;
                        &lt;img src=&quot;/sos/&quot; alt=&quot;image&quot; /&gt;                            
                     &lt;/div&gt;
                     &lt;div class=&quot;desc-container&quot;&gt;        
                        &lt;div class=&quot;description&quot;&gt;                                                        
                           &lt;span class=&quot;feature-desc&quot;&gt;
                              &lt;p&gt;Great Service ! , SOS came to the rescue me in no time at all and made my day.&lt;/p&gt;
      &lt;p&gt;- a customer&lt;/p&gt;
                            &lt;/span&gt;                                
                        &lt;/div&gt;
                     &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
             &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  <p>EDIT 4 &gt;&gt;&gt;&gt;&gt;&gt;</p>
  <p>This is what it is doing</p>
  <p><img src="https://i.stack.imgur.com/dflkT.gif" alt="enter image description here" /></p>