Задайте класс css внутри другого класса css

Привет, У меня проблемы с некоторыми классами css в joomla. У меня есть два div в модуле, один - обертка class= "wrapper", другой - содержимое class= "content". Содержимое находится внутри обертки. То, что я пытаюсь сделать, - это нацелить стиль CSS на класс содержимого. Обычно я просто помещал .content {my style info} в таблицу стилей, но проблема в том, что этот класс используется несколько раз на всей странице. Поэтому в бэкэнд вы можете присвоить модулю имя класса, поэтому я назвал этот .testimonials.

Чтобы я не изменял все другие классы содержимого на странице, я пытаюсь настроить таргетинг на него, поставив это:

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

но он не работает, я знаю, что вы можете сделать это с помощью div, поэтому

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

но мой вопрос в том, может ли это быть сделано с классами?, если что-то идет не так, как я пытаюсь использовать следующее:

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

по какой-то причине контент не обертывается и просто исчезает со страницы в конце абзаца, поэтому я стараюсь, чтобы класс 1-го уровня, на котором сидит контент, не перекрывает ничего, странная вещь даже если я исправлю класс div, содержимое будет помещено в 50px, оно все равно не будет обертывать текст, поэтому я не уверен, правильно ли я нацелен на него.

изменить → → → → → ..

Создаваемый html Joomla в основном выглядит следующим образом →

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

то он завернут в миллион других divs в старом стиле Joomla.

Я дал модулю класс отзывов, поэтому он выглядит примерно так:

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

ИЗМЕНИТЬ 3 → → → > Хорошо, это то, что он выплевывает

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

ИЗМЕНИТЬ 4 → → →

Это то, что он делает

Ответ 1

Не знаю, как выглядит HTML (что поможет с ответами). Если он

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

затем просто удалите пробел в вашем css. A la...

.testimonials.content { css here }

UPDATE:

Хорошо, посмотрев HTML, посмотрите, работает ли это...

.testimonials .wrapper .content { css here }

или просто

.testimonials .wrapper { css here }

или

.desc-container .wrapper { css here }

все 3 должны работать.

Ответ 2

Я использую div вместо таблиц и могу назначать классы в основном классе, как показано ниже:

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>

Если вы хотите стилизовать определенную "ячейку" исключительно, вы можете использовать другой подкласс или идентификатор div, например:

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

Ответ 3

Я где-то читал, что мы можем вложить класс внутри другого класса, но забыл об этом. Это было примерно так:

<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
<style>
.parent{
.child1, .child2, .child3{/*your css properties goes here*/}
}
</style>

Может быть, что-то не хватает в этом коде, но это также способ сделать это.