Almeje uma classe css dentro de outra classe css


95

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

insira a descrição da imagem aqui


Bem, até que você mostre a marcação HTML relevante , não sabemos o que você está almejando ...
David diz reintegrar Monica em

Olá, não é possível, pois o html é criado pelo próprio joomla, é parte do módulo de feed de notícias que estou tentando mudar
Iain Simpson

Então? Deixe-o renderizar uma página e, em seguida, "visualize a fonte" e copie / cole o trecho relevante da fonte. Sem algo para ver, estamos apenas tateando no escuro, e isso não é construtivo para respostas reais e terei que votar para encerrar como 'não é uma questão real'. O que prefiro não fazer, se houver uma chance de realmente ajudá-lo.
David diz para restabelecer Monica em

ok, pronto, a classe de conteúdo basicamente continua, em vez de embrulhar, então desaparece da tela, mesmo se eu fixar a largura para 300px, que é o tamanho de seu pai
Iain Simpson

Respostas:


117

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.


obrigado vou dar uma chance, eu teria postado algum html, mas é gerado pelo Joomla, então tenho apenas um milhão de arquivos php
Iain Simpson

hmm isso é realmente estranho, se eu colocar .content sozinho, e depois colocar 300px tudo na página com o conteúdo da classe alterado para 300px, exceto o que eu quero alterar, em uma inspeção posterior com o firebug sua classe também é conteúdo , então não tenho ideia do que está causando isso, acho que talvez tenha que empacotar o site e carregá-lo para mostrar a todos como está em uma instalação local no mo.
Iain Simpson

Bem, pelo menos precisamos realmente ver um pouco de HTML. Talvez não a página inteira, mas pelo menos a seção relevante.
Scott

Eu tentei o acima, mas ainda assim não foi, o wrapper é uma classe, então não deveria ser .wrapper?
Iain Simpson

1
Eu li errado e editei, por favor, veja novamente. Perceba que contentser um vão não é um elemento de bloco, portanto, nenhuma quantidade de propriedades de largura vai alterar isso. Você precisa alterar a largura de.wrapper
Scott

24

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>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.