How to exclude a class with all children in the definition of style

Question

I have a file like

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

I want to use styles only for the first div. I tried to use div:not(.abc, .abc *) , div:not(.abc):not(.abc *) , div:not(.abc), div:not(.abc) * , but not one of them did not work. It would be difficult to edit html because there would be many files to edit. Also, the code shown above appears in different places, so using the > selector is not a solution ... Does anyone know how to do this?

Answer 1

You cannot reliably use the :not() selector in CSS to exclude an element and / or its descendants. The reason for this is explained in this answer (and some other links to which it refers):

You cannot use combinators. This works in jQuery but not CSS:

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

This is especially unpleasant, primarily because he does not have a proper workaround. There are some workarounds ( 1 and 2 ), but they usually depend on the HTML structure and therefore are very limited in the utility.

And since your markup is so unpredictable that you cannot edit it or use the > selector, I’m afraid there are not many days off for you except to find a way to apply the class to your div vertex and use this class as demonstrated by Fluidbyte , and / or use jQuery as above.

Answer 2

It’s usually easier for me to include what you need through the class, and then try to exclude child elements. See the fiddle here: http://jsfiddle.net/cLtHg/

This takes care of inheritance issues and is much more friendly between browsers.

Answer 3

Use :first-child with the id or class of its parent. If you cannot catch an element using CSS, it is recommended to use Javascript or jQuery .

Answer 4

Have you tried :first-child or :nth-child() selecor?

Answer 5

If you really don’t touch HTML, then a simple, albeit dirty approach is to apply styles to the first div and then remove them from subsequent divs, for example:

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

The main drawback here is that some styles in child divs may be deleted unintentionally. Depending on how they are designed in the first place.