web-dev-qa-db-ja.com

CSSルールの要素のひ孫を選択するにはどうすればよいですか？

このHTMLを前提として、CSSを変更するためにrt-blockを選択するにはどうすればよいですかrt-header内にネストされている場合のみ図のように？

<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>

クラスrt-grid-12 rt-alpha rt-omega一貫性が保たれず、Gantry/LESS設定によっては単一のdivになる場合があります。 Joomlaで使用されるRTテンプレート）に精通している場合は、rt-blockが全体で使用されているため、一般的にクラスを変更できないことをご存知でしょう。

[〜＃〜] update [〜＃〜]-同じニーズを持つHTMLの別の可能性を示しています：

<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>
htmlcssjoomlacss-selectors
14
GDP

一般的なcss階層（ネストされたレベル）は単純なスペースで与えられます

そう：

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

.rt-blockの下にあるときに#rt-headerを選択するために必要なのは、単純です（Marc Bがコメントで回答したように）。

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

フレームワークに依存しない別の例として、次のような構造があるとします。

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

親要素が何であれ、<p>内の<section class="introduction">タグのみをターゲットにしたかったのです。次のようにCSSを記述できます。

.introduction p { /* rules */ }
1
Mark