How to select an element's great-grandchild for CSS rules?


Tags: html,css,joomla,css-selectors

Problem :

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>


Solution :

General css hierarchy (at any nested level) is given by a simple space

So:

#rt-header .rt-block {
    /* CSS STYLE */
}

    CSS Howto..

    How to set an image when we select its sub menu

    How can I create a pop up like the one Google Calendar uses ?

    SCSS / Sass: How do i change a mixin to output specific CSS?

    tooltip box not showing using css

    How to ignore

    CSS rules in wordpress theme?

    How do I make footer take 100% of the width of the webpage?

    How to horizontally center Twitter Bootstrap grid elements

    How do I create a region/zone map for the web? [closed]

    how to clip text in css like gmail does to emails subject listings

    How to save the state of css background-color property change when navigating away from one menu to another

    How to set align of elements to center with css?

    How to use jQuery to select a class name that's transformed by css-loader?

    CSS: How to vertically align elements inside div with display: table-cell

    How do I style an upload input using CSS?

    How to move div from bottom to top

    How to add & show 4d image in web site with css

    How can I append the images from this JSON file properly into the correct divs

    How to convert from Powerpoint to HTML / CSS ? (FOSS)

    how to set css for Zend form?

    How to only make the text of a link go down by 1px when active and not the whole line/paragraph?

    How to selectively load/use CSS for YUI modules?

    How to put text on top of a pattern overlay CSS

    How to position my embedded flash file

    How to Add external Javascript and CSS for CakePhp

    How to create shape image border with clickable container?(use HTML and CSS)

    How to make a horizontal div scroll bar float like a fixed CSS div

    How to properly align a page with header, nav, section and footer // HTML5 and CSS

    How to remove Width and Height values of an Image with css?

    How do I animate this box to have a pop out effect?

    How to convert an element css to JSON? [duplicate]