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>
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 ([...]).
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.
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.
To select all the children of an element except the last child, use :not and :last-child pseudo classes.
General css hierarchy (at any nested level) is given by a simple space
So:
#rt-header .rt-block {
/* CSS STYLE */
}
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 */ }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With