it-swarm-pt.tech

Como selecionar o bisneto de um elemento para regras de CSS?

Dado esse HTML, como posso selecionar rt-block Para alterar o CSS somente quando aninhado no cabeçalho rt , como mostrado?

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

As classes rt-grid-12 rt-alpha rt-ômega não permanecem consistentes, às vezes sendo uma única div, dependendo das configurações de Gantry/LESS . Se você estiver familiarizado com os RT modelos usados ​​no Joomla, saberá que rt-block É usado o tempo todo e, portanto, a classe em geral não pode ser alterada.

UPDATE - mostrando outra possibilidade de HTML com a mesma necessidade:

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

A hierarquia geral de CSS (em qualquer nível aninhado) é fornecida por um espaço simples

Assim:

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

Tudo o que você precisa para selecionar .rt-block quando está sob #rt-header é simplesmente (como Marc B respondeu nos comentários):

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

Para outro exemplo independente de framework, digamos que você tenha uma estrutura como esta:

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

e eu queria segmentar apenas <p> tags dentro de <section class="introduction">, não importa qual seja o elemento pai. Você pode escrever o CSS assim:

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