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

enter image description here

Well, until you show the relevant HTML mark-up *we* don't know what you're targeting at all... — David Thomas, Jan 22 '12 at 21:58
Hi its not possible as the html is created by joomla itself, its part of the build in news feed module im trying to change — Iain Simpson, Jan 22 '12 at 22:05
So? Let it render a page, and then 'view source' and copy/paste the relevant excerpt from the source. Without *something* to see we're just groping in the dark, and that's not constructive for actual answers and I will have to vote to close as 'not a real question.' Which I'd rather not do, if there's a chance of actually helping you. — David Thomas, Jan 22 '12 at 22:09
ok, done, the content class is basically carrying on, instead of wrapping, so vanishes off the screen, even if I fix the width to 300px which is how big its parent is — Iain Simpson, Jan 22 '12 at 22:15

Scott · Accepted Answer · 2012-01-22T22:19:31.897

152

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.

edited Jan 22 '12 at 22:19

answered Jan 22 '12 at 21:56

Scott

21,475
8
43
55

thanks I will give that a go, I would have posted some html, but its generated by Joomla, so only have a million php files – Iain Simpson Jan 22 '12 at 21:58
hmm this is really odd, if I put .content just by iteself, and then put 300px everything on the page with the class content changes to 300px, apart from the thing I want to change, on further inspection with firebug its class is also content, so I have no clue now what's causing it, think I might have to pack the site up and upload it so show everyone as its on a local install at the mo. – Iain Simpson Jan 22 '12 at 22:04
Well at the very least we need to actually see a bit of HTML. Perhaps not the entire page, but at least the relevant section. – Scott Jan 22 '12 at 22:05
I tried the above, but still no go, the wrapper is a class though, so shouldn't it be .wrapper ? – Iain Simpson Jan 22 '12 at 22:22
1

I misread and have edited, please see again. Realize that `content` being a span is not a block element so no amount of width properties is going to alter that. You need to alter the width of `.wrapper` – Scott Jan 22 '12 at 22:23
.desc-container .wrapper seems to effect all the other modules on the page apart from the one I want, even though it has exactly the same classes as the rest :-S – Iain Simpson Jan 22 '12 at 22:25
AHHHH !, thanks for that tip, that sorted it !! , I changed the content class to display:block and it works now !, many thanks :-) – Iain Simpson Jan 22 '12 at 22:27
Then try... `.testimonials .desc-container .wrapper {}` – Scott Jan 22 '12 at 22:27

Jason Ebersey · Answer 2 · 2014-08-23T13:35:29.973

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>

ZiaUllahZia · Answer 3 · 2021-12-03T23:47:58.117

3

.parentClass {
      background:green;
      padding:20px:
}
.parentClass>.childClass {
      background:pink;
      padding:10px;
      margin:10px;
}

<div class="parentClass">
   Donec a sem pharetra, ultricies ipsum id
   <div class="childClass">
     Lorem ipsum dolor sit amet consectetur
   </div>
   Donec a sem pharetra, ultricies ipsum id
</div>

edited Dec 03 '21 at 23:47

answered Dec 03 '21 at 23:40

ZiaUllahZia

1,072
2
16
30

Target a css class inside another css class

3 Answers3

CSS

HTML

Linked