Apuntar a una clase css dentro de otra clase css


90

Hola, tengo problemas con algunas clases de CSS en Joomla. Tengo dos divs en un módulo, uno es el contenedor class = "contenedor", el otro es el contenido class = "content". El contenido está dentro de la envoltura. Lo que estoy tratando de hacer es apuntar a un estilo CSS en la clase de contenido. Por lo general, solo pondría .content {my style info} en la hoja de estilo, pero el problema es que esta clase se usa varias veces en toda la página. Entonces, en el backend, puede asignar a un módulo un nombre de clase, así que lo he llamado .testimonials.

Para no alterar todas las demás clases de contenido en la página, estoy tratando de orientarla poniendo esto:

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

pero no funciona, sé que puedes hacer esto con divs, así que

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

pero mi pregunta es ¿se puede hacer esto con las clases ?, si es así, algo va mal ya que estoy tratando de usar lo siguiente:

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

ya que, por alguna razón, el contenido no se ajusta y simplemente desaparece de la página al final del párrafo, así que estoy tratando de asegurarme de que la clase de primer nivel en la que se encuentra el contenido no se superponga con nada, lo extraño es que incluso si lo arreglo la clase div en la que el contenido se encuentra en 50px todavía no envuelve el texto, así que no estoy seguro de si lo estoy apuntando, ¿verdad?

editar >>>>>>>>>>> ..

El html que Joomla está creando básicamente se ve así >>

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

luego está envuelto en un millón de otros divs en el buen estilo antiguo de Joomla.

Le he dado al módulo la clase de testimonios, por lo que termina luciendo algo como:

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

EDITAR 3 >>>>>>> OK, esto es lo que está escupiendo

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

EDITAR 4 >>>>>>

Esto es lo que esta haciendo

ingrese la descripción de la imagen aquí


Bueno, hasta que se muestre el código HTML correspondiente margen de que no sabemos lo que usted está apuntando a todos ...
David dice de reactivación de Mónica

Hola, no es posible ya que el html es creado por el propio Joomla, es parte de la compilación en el módulo de suministro de noticias que estoy tratando de cambiar
Iain Simpson

¿Entonces? Deje que renderice una página, y luego 'ver fuente' y copie / pegue el extracto relevante de la fuente. Sin algo que ver, simplemente estamos tanteando en la oscuridad, y eso no es constructivo para las respuestas reales y tendré que votar para cerrar porque 'no es una pregunta real'. Lo que preferiría no hacer, si existe la posibilidad de ayudarte.
David dice reinstalar a Monica

ok, hecho, la clase de contenido básicamente continúa, en lugar de envolverse, por lo que desaparece de la pantalla, incluso si fijo el ancho en 300px, que es el tamaño de su padre
Iain Simpson

Respuestas:


114

No estoy seguro de cómo se ve el HTML (eso ayudaría con las respuestas). Si es

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

luego simplemente elimine el espacio en su css. A la ...

.testimonials.content { css here }

ACTUALIZAR:

Bien, después de ver HTML, mira si esto funciona ...

.testimonials .wrapper .content { css here }

o solo

.testimonials .wrapper { css here }

o

.desc-container .wrapper { css here }

los 3 deberían funcionar.


gracias, lo intentaré, habría publicado algo de html, pero está generado por Joomla, así que solo tengo un millón de archivos php
Iain Simpson

hmm, esto es realmente extraño, si pongo .content solo, y luego pongo 300px todo en la página con el contenido de la clase cambia a 300px, aparte de lo que quiero cambiar, en una inspección más detallada con firebug, su clase también es contenido , así que ahora no tengo ni idea de qué lo está causando, creo que podría tener que empaquetar el sitio y cargarlo, así que muéstrelo a todos como si estuviera en una instalación local en el mes.
Iain Simpson

Bueno, al menos necesitamos ver un poco de HTML. Quizás no toda la página, pero al menos la sección relevante.
Scott

Intenté lo anterior, pero aún así no lo hice, aunque el contenedor es una clase, ¿no debería ser .wrapper?
Iain Simpson

1
He leído mal y lo he editado. Vuelve a consultar. Tenga en cuenta que contentser un tramo no es un elemento de bloque, por lo que ninguna cantidad de propiedades de ancho lo alterará. Necesita modificar el ancho de.wrapper
Scott

22

Uso div en lugar de tablas y puedo apuntar a clases dentro de la clase principal, como se muestra a continuación:

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 desea diseñar una "celda" en particular exclusivamente, puede usar otra subclase o la identificación del div, por ejemplo:

.main #red {color: rojo; }

<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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.