37

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>
7
  • #rt-header .rt-container .rt-grid-6 .rt-grid-6 .rt-block ? Commented Jun 17, 2014 at 16:27
  • Are you wanting to style the .rt-block class, or style the .rt-header only if rt-block is present?
    – Michael
    Commented Jun 17, 2014 at 16:28
  • 4
    #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
    Commented Jun 17, 2014 at 16:28
  • @MarcB that's what I was thinking.
    – Michael
    Commented Jun 17, 2014 at 16:29
  • .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
    Commented Jun 17, 2014 at 16:31

2 Answers 2

53

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

So:

#rt-header .rt-block {
    /* CSS STYLE */
}
1
  • 2
    The sorcery of CSS....and a @#$% typo.....I was fighting with .rt-header .rt-block !!!! Thanks for forcing fresh eyes!
    – GDP
    Commented Jun 17, 2014 at 16:39
5

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 */ }

Not the answer you're looking for? Browse other questions tagged or ask your own question.