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>
General css hierarchy (at any nested level) is given by a simple space
So:
#rt-header .rt-block {
/* CSS STYLE */
}