Problemas de CSS con divs anidados y clases utilizadas en múltiples niveles

(Antes de empezar, sí he pedido un pregunta similar antes de; desafortunadamente, debido a que se agregó nueva información, el marcado ha cambiado completamente para peor, y ahora es imposible para mí descifrarlo).

Tengo un marcado muy feo generado por una vista de Drupal. Debido a que muchos de los nombres de clase se pueden usar en varios lugares, en varios niveles de la jerarquía (por ejemplo, el primer view-content/view-grouping/view-grouping-header necesita flotar hacia la izquierda (o al menos su contenido lo hace para la imagen de la cabeza, pero los otros elementos del encabezado de agrupación de vista deben mostrarse a la derecha de la imagen), no puedo simplemente abordar los nombres de clase; Necesito obtener la jerarquía completa. Tengo algunos problemas con eso... (Sé que alguien vendrá y dirá: "pero puede agregar clases a los campos en las vistas de Drupal; ¿por qué no hacerlo?" Bueno, puede hacerlo si está mostrando campos individuales, pero en este caso necesito agrupar por 5 de los 6 campos que se muestran, y cuando agrupa por un campo, configura el campo para que se excluya de la visualización, lo que significa que cualquier clase personalizada que agregue al campo son ignorados Lo único que puede hacer con estilo con la agrupación es aplicar una sola clase a todas las filas, lo que he hecho pero no ayuda en este caso).

<div class="view-clone-of-speaker-list">
<div class="view-content">
<div class="view-grouping">
    <div class="view-grouping-header">
        <div id="file-741" class="file file-image file-image-jpeg 
         contextual-links-region">
            <div class="content">
                <img src="johndoe.jpg" width="180" height="180" alt="" /> 
                <!-- this img needs to float left -->
            </div>
        </div>
    </div>

    <div class="view-grouping-content">
        <div class="view-grouping">
            <div class="view-grouping-header">
                <a href="/es/speaker/john-doe">John Doe</a>
                <!-- this view-grouping-header a needs to be styled differently 
                than the one the next level down (view full profile) -->
            </div>

            <div class="view-grouping-content">
                <div class="view-grouping">
                    <div class="view-grouping-header">
                        Freelance consultant
                    </div>
                    <div class="view-grouping-content">
                        <div class="view-grouping">
                            <div class="view-grouping-header">
                                Path to Purchase Institute
                            </div>
                            <div class="view-grouping-content">
                                <div class="view-grouping">
                                    <div class="view-grouping-header">
                                        <a href="/es/speaker/john-doe">
                                    view full profile    &gt;</a>
                                    </div>
                                    <div class="view-grouping-content">
                                        <h3>Sessions:</h3>
                                        <div class="views-row views-row-1 views-row-odd views-row-first">      
                                            <div class="views-field views-field-title-1">
                                                <span class="field-content">
                                                    <a href="/es/session/keynote-address-2">Keynote Address 2</a>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="views-row views-row-2 views-row-even views-row-last">      
                                            <div class="views-field views-field-title-1">
                                                <span class="field-content">
                                                    <a href="/es/session/keynote-address-1">Keynote Address 1</a>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>

Esto es lo que he intentado, por ejemplo, para obtener la agrupación de vista externa: quiero poner un borde alrededor de todo:

.view-clone-of-speaker-list.div.view-content.div.view-grouping {
    border: 1px solid #a8a8a8;      
}

Pero según Firebug, el elemento no tiene ese estilo.

Aquí está el resultado deseado; No necesito ayuda (¡no lo creo!) con el código de estilo actual; Solo necesito una mano para descubrir cómo abordar los elementos correctos dado lo malditamente anidados que están. enter image description here

preguntado el 12 de junio de 12 a las 18:06

En realidad, no leí gran parte de la publicación, pero solo por diversión, intente agregar !important después de la regla css. asi seria .view-clone-of-speaker-list.div.view-content.div.view-grouping { border: 1px solid #a8a8a8 !important; } Eso te dirá si es una cuestión de especificidad o no. Si eso funciona, solo significa que el estilo está siendo anulado por un estilo principal. -

Ni siquiera necesito hacer eso. Puedo verificar el elemento en Firebug para ver qué clases hereda, y las únicas clases que obtiene son de la hoja de estilo del agente de usuario, nada de ningún tipo de estilo principal. -

Bueno, en primer lugar, debe eliminar el primer .div en su selector de estilo. Esto se debe a que algo.algo más busca un elemento de la clase "algo más". dentro "algo". Tal elemento no existe en su arquitectura. Entonces .view-clone-of-speaker-list.div.view-content buscaría un .view-content dentro un div dentro ver-clonar-lo que sea -

Felipe: Eh, no. .algo.algo más busca un elemento con clase "algo" que también tenga una clase de "algo más". Agregar puntos es solo una forma de agregar más clases, no de entrar en algo. -

1 Respuestas

Un punto en un selector significa "clase"; div.myClass significa un div con una clase de myClass. div.myClass.div.myOtherClass no significa nada.

Creo que lo que quieres es

div.view-clone-of-speaker-list>div.view-content>div.view-grouping {
    border: 1px solid #a8a8a8;      
}

Eso significa "un div con una clase de agrupación de vista, que es un hijo de un div con una clase de contenido de vista, que es un hijo de un div con una clase de vista-clon-de-lista-de-altavoces".

Respondido el 12 de junio de 12 a las 19:06

Había probado eso primero. No funciona: hay demasiadas clases que anidan de diferentes maneras en diferentes lugares. De acuerdo a este, si tiene un espacio entre sus elementos, encuentra TODOS los elementos que son descendientes en CUALQUIER nivel, lo que obviamente no funciona aquí. Necesito poder abordar la configuración exacta de divs y clases en cada punto. - emmys

Y este fue uno de los simples: para llegar al nombre de la empresa, por ejemplo, necesito hacer algo como esto (obviamente no exactamente esto, ya que no funciona) div.view-clone-of-speaker-list div.view-content div.view-grouping div.view-grouping-content div.view-grouping div.view-grouping-content div.view-grouping div.view-grouping-content div.view-grouping div.view-grouping-header {} - emmys

Para aclarar, si uso su versión, los estilos SÍ se aplican, pero terminan "cruzándose", si eso tiene algún sentido, de un nivel a otro. Entonces, el borde se aplica a CADA div que tiene la clase de agrupación de vistas, lo cual no quiero. - emmys

Bien, he cambiado mi respuesta para especificar hijos directos en lugar de descendientes. - jacob mattison

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.