Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 231
GDP Avatar asked Jun 17 '14 16:06

GDP


People also ask

How do I select grandchildren in CSS?

Grandchildren Selectors This selector targets list elements within an unordered list, within an unordered list. You can also target specific elements with child selectors (>), adjacent sibling selectors (+), and attribute selectors ([...]).

How do I select a specific child in CSS?

The CSS child selector has two selectors separated by a > symbol. The first selector indicates the parent element. The second selector indicates the child element CSS will style.

How do I select all immediate child in CSS?

The CSS child combinator ( > ) can be used to select all elements that are the immediate children of a specified element. A combinator combines and explains the relationship between two or more selectors.

How do I select all child elements except one in CSS?

To select all the children of an element except the last child, use :not and :last-child pseudo classes.


2 Answers

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

So:

#rt-header .rt-block {
    /* CSS STYLE */
}
like image 156
LcSalazar Avatar answered Oct 18 '22 08:10

LcSalazar


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 */ }
like image 32
Mark Avatar answered Oct 18 '22 10:10

Mark