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      lt div class  wrapper  gt   lt div class  content  gt SOME CONTENT lt  div  lt  div gt    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     lt div class  testimonials  gt    lt div class  wrapper  gt   lt div class  content  gt SOME CONTENT lt  div  lt  div gt   lt  div gt    EDIT 3         OK  this is what it is spitting out   lt div class  testimonials  gt      lt div class  key4-block  gt         lt div class  module-title  gt  lt h2 class  title  gt Client Testimonials lt  h2 gt  lt  div gt            lt div class  key4-module-inner  gt               lt div class  module-content  gt                                                  lt script type  text javascript  gt                   RokStoriesImage  rokstories-184   push                       RokStoriesImage  rokstories-184   push                       RokStoriesImage  rokstories-184   push                   lt  script gt            lt div id  rokstories-184  class  rokstories-layout6 content-left    gt              lt div class  feature-block  gt                       lt div class  feature-wrapper  gt                 lt div class  feature-container  gt                    lt div class  feature-story  gt                       lt div class  image-full  style  float  right  gt                           lt img src   sos   alt  image    gt                                                   lt  div gt                       lt div class  desc-container  gt                           lt div class  wrapper  gt                                                                                      lt span class  content  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  feature-story  gt                      lt div class  image-full  style  float  right  gt                         lt img src   sos   alt  image    gt                                                  lt  div gt                      lt div class  desc-container  gt                                 lt div class  description  gt                                                                                    lt span class  feature-desc  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    EDIT 4         This is what it is doing

User · Answer

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>

User · Answer

Not certain what the HTML looks like  that would help with answers   If it s    lt div class  testimonials content  gt stuff lt  div gt    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

[html] Target a css class inside another css class

CSS

HTML

Examples related to html

Examples related to css

Examples related to joomla

Examples related to module