Target a css class inside another css class

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

525785 次浏览
小开
最佳答案

不确定 HTML 是什么样的(这将有助于解决问题)

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

然后简单地删除空格在您的 css。一个 la..。

.testimonials.content { css here }

更新:

好的，在看过 HTML 之后，看看这个是否有效..。

.testimonials .wrapper .content { css here }

or just

.testimonials .wrapper { css here }

或者

.desc-container .wrapper { css here }

all 3 should work.

小开

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

超文本标示语言

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

如果你想独占一个“ cell”的样式，你可以使用另一个子类或者 div 的 id，例如:

{ 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>
小开 

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


提交答案