CODEWITHSUNDEEP
htmlcssjoomlacss-selectors
GDP
GDP

Reputation: 8178

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

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>

Upvotes: 38

Views: 62931

Answers (2)

Mark
Mark

Reputation: 323

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

Upvotes: 5

LcSalazar
LcSalazar

Reputation: 16821

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

So:

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

Upvotes: 53

Related Questions