PIB
Dado este HTML, ¿cómo puedo seleccionar rt-block
para modificar el CSS solo cuando está anidado dentro del encabezado rt ¿como se muestra?
<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>
Las clases rt-grid-12 rt-alfa rt-omega no permanezca consistente, a veces siendo un solo div, dependiendo de la configuración de Gantry/LESS. Si está familiarizado con las plantillas RT utilizadas en Joomla, sabrá que rt-block
se usa en todas partes, por lo que la clase en general no se puede modificar.
ACTUALIZAR – mostrando otra posibilidad de HTML con la misma necesidad:
<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>
La jerarquía general de css (en cualquier nivel anidado) viene dada por un espacio simple
Asi que:
#rt-header .rt-block {
/* CSS STYLE */
}
-
La brujería de CSS…. y un error tipográfico de @#$%… ¡Estaba peleando con .rt-header .rt-block! Gracias por obligar a los ojos frescos!
– PIB
17 de junio de 2014 a las 16:39
Todo lo que necesitas para seleccionar .rt-block
cuando esta debajo #rt-header
es simplemente (como respondió Marc B en los comentarios):
#rt-header .rt-block { /* rules here */ }
Para otro ejemplo independiente del marco, digamos que tiene una estructura como esta:
<div class="content">
<section class="introduction">
<p>Hello!</p>
</section>
<section class="overview">
<p>This is an overview.</p>
</section>
</div>
y quería apuntar solo <p>
etiquetas dentro <section class="introduction">
, sin importar cuál sea el elemento padre. Podrías escribir el CSS así:
.introduction p { /* rules */ }
#rt-header .rt-container .rt-grid-6 .rt-grid-6 .rt-block ?
– Andrés Mateo
17 de junio de 2014 a las 16:27
¿Desea diseñar la clase .rt-block o diseñar el encabezado .rt solo si rt-block está presente?
– Miguel
17 de junio de 2014 a las 16:28
#rt-header .rt-block
es todo lo que necesita, a menos que también necesite alguno de esos bits de cuadrícula/alfa/omega.– Marc B.
17 de junio de 2014 a las 16:28
@MarcB eso es lo que estaba pensando.
– Miguel
17 de junio de 2014 a las 16:29
.rt-header .rt-block
– esto aplicará estilo a todos los bloques rt que son descendientes del encabezado rt. lo cual está bien si solo hay uno. Si hay más de uno, debe ser más específico con la lista de selección– fnostro
17 de junio de 2014 a las 16:31