Oi, estou tendo problemas com algumas classes de css no joomla. Eu tenho duas divs em um módulo, uma é a classe wrapper = "wrapper", a outra é a classe de conteúdo = "conteúdo". O conteúdo está dentro do invólucro. O que estou tentando fazer é direcionar um estilo css na classe de conteúdo. Normalmente, eu colocaria apenas .content {minhas informações de estilo} na folha de estilo, mas o problema é que essa classe é usada várias vezes ao longo da página. Portanto, no back-end, você pode atribuir a um módulo um nome de classe, então chamei este de .testimonials.

Para que eu não altere todas as outras classes de conteúdo na página, estou tentando direcioná-la, colocando isto:

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

mas não está funcionando, eu sei que você pode fazer isso com divs, então

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

mas minha dúvida é que isso pode ser feito com as aulas? Se sim, algo está errado porque estou tentando usar o seguinte:

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

como por alguma razão o conteúdo não está embrulhado e apenas desaparece da página no final do parágrafo, então estou tentando ter certeza de que a classe de primeiro nível em que o conteúdo está sentado não está sobrepondo nada, o estranho é mesmo se eu corrigir a classe div, o conteúdo fica em 50px, mas ainda não quebrará o texto, então não tenho certeza se estou direcionando isso certo?

editar >>>>>>>>>> ..

O html que o Joomla está criando basicamente se parece com isto >>

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

em seguida, ele é envolvido em um milhão de outras divs no bom e velho estilo do Joomla.

Eu dei ao módulo a classe de depoimentos, então ele acaba ficando parecido com:

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

EDIT 3 >>>>>>> OK, isso é o que está dizendo

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

EDITAR 4 >>>>>>

Isso é o que está fazendo

Não tenho certeza de como é o HTML (isso ajudaria nas respostas). Se é

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

em seguida, simplesmente remova o espaço em seu css. A la ...

.testimonials.content { css here }

ATUALIZAR:

Ok, depois de ver o HTML veja se isso funciona ...

.testimonials .wrapper .content { css here }

ou apenas

.testimonials .wrapper { css here }

ou

.desc-container .wrapper { css here }

todos os 3 devem funcionar.

Eu uso div em vez de tabelas e sou capaz de direcionar classes dentro da classe principal, conforme abaixo:

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>

Se você quiser estilizar uma determinada "célula" exclusivamente, você pode usar outra subclasse ou o id do div, por exemplo:

.main #red {cor: vermelho; }

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