Cómo aplicar CSS a los niños sólo inmediatos de una determinada clase

Tengo un div y en ese div quiero crear otro div con una clase diferente y tener el interior div completamente separados de los ajustes exteriores div CSS.Cómo aplicar CSS a los niños sólo inmediatos de una determinada clase

De esta manera:

<div class="outer"> 
    <div><h1> h1 </h1><div> 
    <div class="inner"> 
     <h2> h2 </h2> 
    </div> 
    <h2> h2 </h2> 
</div>

.outer h1{ color:blue; } 
.outer h2{ color:red; } 

.inner { height: 111px; }

Lo que yo quiero es desarmar el color rojo de la h2 en el "inner" div

Puede parecer estúpido no solo sobrepeso el color a negro aquí, pero qué pasa si tengo muchos más argumentos en el CSS o incluso si es dinámico.

Edit: Supongo que no está claro, pero lo que necesito es realmente todo lo contrario de las respuestas que obtuve hasta ahora. Tengo un div contenedor principal y tiene una gran cantidad de configuraciones en el CSS. Ahora quiero insertar un div en el contenedor principal sin que tenga ninguna de las configuraciones de CSS del contenedor principal.

Fuente

2012-02-27 Dvir Levy

.outer > h2 { color:red; }

de esta manera solo el hijo directo del div externo obtiene este valor de color, debe arreglar el trabajo.

Fuente

2012-02-27 09:11:23

ya supongo que no está claro. pero lo que necesito es realmente todo lo contrario de eso. tengo un 'div de contenedor principal' y tiene muchas configuraciones en' css'. ahora quiero insertar un 'div' en el' main-container' sin tener ninguna de las configuraciones de 'main-container' css –

Hay algunos enfoques. Una es especificar un 'color' solo para' .inner h2 {...} '. Esto dejará todas las demás h2 dentro del div principal-controlador de la misma manera, siendo el único en el interior diferente. Otra es dar una clase a la última h2, y especificar un color diferente para ella, y para que el controlador principal no intente diseñar h2. Esto dará como resultado que h2 interno y todos los demás h2 sean iguales, y el otro h2 con un estilo diferente. Ejemplos: http://jsfiddle.net/5pvpdfud/ –

[Hay cuatro combinadores diferentes en CSS3:] (http://www.w3schools.com/css/css_combinators.asp) 1. selector de descendientes (espacio): ' .outer h2': Todos los descendientes 2. Selector hijo (>): '.outer> h2': Hijo inmediato 3. Selector hermano adyacente (+):' .outer + h2': Hermano inmediato del mismo padre 4. selector hermano general (~): '.outer ~ h2': todos los hermanos del mismo padre – Abhijeet

Creo que lo que necesita es

.inner h2 {color: inherit}

Fuente

2012-02-27 09:13:03

ya creo que necesito exactamente lo contrario y para toda la clase –

.outer .inner * { color: #000; }

conjuntos de todos los elementos dentro del contenedor interno como con el color negro.

Demo here

Fuente

2012-02-27 20:36:43 Scott

Esa es una gran solución, pero ¿qué pasa si tengo 20 ajustes y no es solo etiquetas h1? –

Este código configurará todo en '.outer .inner' en negro. Juega con la demo a la que me he vinculado ... todas las etiquetas cambiarán. – Scott

Cómo aplicar CSS a los niños sólo inmediatos de una determinada clase

Respuesta

Cuestiones relacionadas