web-dev-qa-db-fra.com

Cible une classe css dans une autre classe css

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

Pour que je ne modifie pas 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 ça ne marche pas, je sais que tu peux le faire avec des divs, donc

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

mais ma question est la suivante: cela peut-il être fait avec des classes?, si quelque chose ne va pas car j'essaie d'utiliser ce qui suit:

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

comme pour une raison quelconque, le contenu n'est pas enveloppant et disparaît simplement de la page à la fin du paragraphe; j'essaie donc de m'assurer que la classe de premier niveau où le contenu est assis ne chevauche pas quoi que ce soit, la chose étrange est même si je répare la classe div du contenu se situe dans 50px il ne sera toujours pas envelopper le texte, donc je ne suis pas sûr si je le cible pas vrai?.

modifier >>>>>>>>>> ..

Le code HTML créé par Joomla ressemble à ceci >>

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

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

J'ai donné au module la classe de témoignages, il a donc l'aspect suivant:

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

EDIT 3 >>>>>>> OK, c'est ce que ça crache

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

C'est ce qu'il fait

enter image description here

htmlcssjoomlamodule
69
Iain Simpson

Pas certain de ce à quoi ressemble le HTML (cela aiderait avec des réponses). Si c'est

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

puis supprimez simplement l’espace dans votre css. À la...

.testimonials.content { css here }

PDATE:

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

.testimonials .wrapper .content { css here }

ou juste

.testimonials .wrapper { css here }

ou

.desc-container .wrapper { css here }

tous les 3 devraient fonctionner.

82
Scott

J'utilise div au lieu de tables et je peux cibler les classes 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 attribuer un style 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>
20
Jason Ebersey