Target a css class inside another css class

Question

Hi I am having problems with some css classes in joomla. I have two divs in a module, one is the wrapper class="wrapper", the other is the content class="content" . 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 .

So that I dont alter all the other content classes on the page I am trying to target it by putting this :

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

but it is not working, I know you can do this with divs, so

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

but my question is can this be done with classes ?, if so something is going wrong as I am trying to use the following :

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

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

edit >>>>>>>>>>..

The html Joomla is creating basically looks like this >>

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

then it is wrapped in a million other divs in the good old Joomla style.

I have given the module the class of testimonials, so it ends up looking something like :

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

EDIT 3 >>>>>>> OK, this is what it is spitting out

<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 >>>>>>

This is what it is doing

Answer 1

Not certain what the HTML looks like (that would help with answers). If it's

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

then simply remove the space in your css. A la...

.testimonials.content { css here }

UPDATE:

Okay, after seeing HTML see if this works...

.testimonials .wrapper .content { css here } 

or just

.testimonials .wrapper { css here } 

or

.desc-container .wrapper { css here } 

all 3 should work.

Answer 2

I use div instead of tables and am able to target classes within the main class, as below:

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> 

If you want to style a particular "cell" exclusively you can use another sub-class or the id of the div e.g:

.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>