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

Question

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>

Are you wanting to style the .rt-block class, or style the .rt-header only if rt-block is present? — Michael, Jun 17 '14 at 16:28
`#rt-header .rt-block` is all you'd need., unless you need to require any of those grid/alpha/omega bits as well. — Marc B, Jun 17 '14 at 16:28
`.rt-header .rt-block` - this will style all rt-blocks that are descendants of rt-header. which is fine if there is only one. If there is more then one you need to get more specific with the selector list — fnostro, Jun 17 '14 at 16:31
I thinks this is it, I'l try, though I'd swear it didnt work early, the question!, lol — GDP, Jun 17 '14 at 16:34
Do you need to account for any of those intermediate classes? Or do you just want any `.rt-block` so long as it descends from `#rt-header`? — BoltClock, Jun 17 '14 at 16:35

score 51 · Accepted Answer · answered Jun 17 '14 at 16:31

51

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

So:

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

answered Jun 17 '14 at 16:31

LcSalazar

16,524
3
37
69

2

The sorcery of CSS....and a @#$% typo.....I was fighting with .rt-header .rt-block !!!! Thanks for forcing fresh eyes! – GDP Jun 17 '14 at 16:39

score 4 · Answer 2 · answered Jun 17 '14 at 16:46

All that you need in order to select .rt-block when it is under #rt-header is simply (as Marc B answered in the comments):

#rt-header .rt-block { /* rules here */ }

For another, framework-agnostic example, let's say that you have a structure like this:

<div class="content">
  <section class="introduction">
    <p>Hello!</p>
  </section>
  <section class="overview">
    <p>This is an overview.</p>
  </section>
</div>

and I wanted to target only <p> tags inside <section class="introduction">, no matter what the parent element is. You could write the CSS like this:

.introduction p { /* rules */ }

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

2 Answers2

Linked