Cómo excluir una clase con todos los niños en la definición de estilo

Question

Tengo un archivo como

<div> 
<div class="abc"> 
    <div> 
    <!--some more divs inside--> 
    </div> 
</div> 
</div> 

Lo que quiero hacer es aplicar estilos sólo a la primera div. Traté de usar div:not(.abc, .abc *), div:not(.abc):not(.abc *), div:not(.abc), div:not(.abc) * pero ninguno de estos funcionó. Sería difícil editar el html, porque habría muchos archivos para editar. Además, el código que se muestra arriba aparece en diferentes lugares, por lo que usar el selector > no es la solución ... ¿Alguien sabe cómo hacer esto?

Answer 1

No se puede utilizar de forma fiable el selector :not() en el CSS para excluir un elemento y/o sus descendientes. El motivo se explica en this answer (y en algunos otros enlaces):

No se pueden usar combinadores. Esto funciona de jQuery, pero no CSS:

/* 
* Grab everything that is neither #foo itself nor within #foo. 
* Notice the descendant combinator (the space) between #foo and *. 
*/ 
:not(#foo, #foo *) 

Ésta es particularmente desagradable, sobre todo porque no tiene ninguna solución adecuada. Existen algunas soluciones alternativas (1 y 2), pero generalmente dependen de la estructura HTML y, por lo tanto, su utilidad es muy limitada.

Y puesto que su margen de beneficio es bastante impredecible que no se puede editar o utilizar el selector de >, me temo que no hay mucho de una salida para que otro que sea encontrar una manera de aplicar una clase a su arriba div y use esa clase, como demonstrated by Fluidbyte, y/o utilice jQuery, como se indicó anteriormente.

Answer 2

Use :first-child con el ID o la clase de su Elemento primario. Si no puede atrapar el elemento mediante CSS, se sugiere utilizar Javascript o jQuery.

Answer 3

Normalmente me resulta más fácil incluir lo que necesita a través de una clase y luego intentar excluir elementos descendientes. Ver el violín aquí: http://jsfiddle.net/cLtHg/

que se encarga de las cuestiones de herencia y es mucho más amigable a través del navegador.

Answer 4

Ha intentado :first-child o :nth-child() selecor?

Answer 5

Si usted está realmente sin tocar el código HTML, a continuación, aunque un simple enfoque sucia sería aplicar estilos a la primera div y luego eliminarlos de divs posteriores, así:

div {margin-bottom: 20px; border: 1px solid #ccc;} 
div div {margin-bottom: 0; border: none;} 

El mayor inconveniente aquí es que algunos estilos en los divs para niños pueden eliminarse involuntariamente. Depende de cómo se diseñan en primer lugar.