Question

(Before I start, yes I have asked a similar question before; unfortunately due to new information being added, the markup has completely changed for the worse, and it’s now impossible for me to figure out.)

I have some very ugly markup generated by a Drupal view. Because many of the class names can be used in multiple places, in various levels of the hierarchy (for example, the first view-content/view-grouping/view-grouping-header needs to float left (or at least the contents of it do for the headshot image, but the other view-grouping-header elements need to display to the right of the image), I can’t just address the class names; I need to get the full hierarchy. I’m having some trouble with that… (I know someone is going to come along and say, “but you can add classes to fields in Drupal views; why not do that?” Well, you can if you’re displaying individual fields, but in this case I need to group by 5 of the 6 fields that are displayed, and when you group by a field you set the field itself to be excluded from the display, which means any custom classes you add to the field are ignored. The only thing you can do stylewise with grouping is apply a single class to all rows, which I’ve done but doesn’t help in this case.)

<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="/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="/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="/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="/session/keynote-address-1">Keynote Address 1</a>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>

This is what I’ve tried, for example, to get the outer view-grouping – I want to put a border around the entire thing:

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

But according to Firebug the element is not getting that style.

Here’s the desired outcome; I don’t need help (I don’t think!) with the actual style code; I just need a hand figuring out how to address the correct elements given how frakkin’ awfully they’re nested.

Answer 1

A period on a selector means “class”; div.myClass means a div with a class of myClass. div.myClass.div.myOtherClass doesn’t mean anything.

I think what you want is

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

That means “a div with a class of view-grouping, which is a child of a div with a class of view-content, which is a child of a div with a class of view-clone-of-speaker-list”.