How to select an element's great-grandchild for CSS rules?
Asked 07 September, 2021
Viewed 1.1K times
  • 57
Votes

Given this HTML, how can I select rt-block to alter the CSS only when nested within rt-header as shown?

<div id="rt-header">
    <div class="rt-container">
        <div class="rt-grid-6 rt-alpha">
            <div class="rt-grid-6 rt-omega">
                <div class="rt-block ">    // This is the occurrence I want to override
                    my html....
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>

The classes rt-grid-12 rt-alpha rt-omega don't remain consistent, sometimes being a single div, depending on the Gantry/LESS settings. If you're familiar with RT Templates used in Joomla, you'll know that rt-block is used throughout, and so the class in general cannot be altered.

UPDATE - showing another possibility of HTML with the same need:

<div id="rt-header">
    <div class="rt-container">
        <div class="rt-grid-6 rt-alpha rt-omega">
            <div class="rt-block ">    // This is the occurrence I want to override
                my html....
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>

2 Answer