How to exclude a class with all children in style definition

Question

I have a file like

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

What I want to do is to apply styles only to the first div. I tried to use div:not(.abc, .abc *), div:not(.abc):not(.abc *), div:not(.abc), div:not(.abc) * but none of these worked. It would be hard to edit the html, because there would be many files to be edited. Also the code shown above appears in different places, so using > selector is not the solution... Does someone know how to do this?

You already ruled out the best solution `>` (the immediate-child combinator). — David Thomas, Jun 03 '12 at 13:04

score 12 · Accepted Answer · edited Jun 20 '20 at 09:12

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

You can't 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 one is particularly nasty, primarily because it has no proper workaround. There are some loose workarounds (1 and 2), but they usually depend on the HTML structure and are therefore very limited in utility.

And since your markup is unpredictable enough that you cannot edit it or use the > selector, I'm afraid there's not much of a way out for you other than to either find a way to apply a class to your top div and use that class, as demonstrated by Fluidbyte, and/or use jQuery, as implied above.

score 1 · Answer 2 · answered Jun 03 '12 at 13:09

1

I usually find it's easier to include what you need via a class then try to exclude descendant elements. See the fiddle here: http://jsfiddle.net/cLtHg/

That takes care of inheritance issues and is much more cross-browser friendly.

answered Jun 03 '12 at 13:09

Fluidbyte

5,162
9
47
76

Riz · Answer 3 · 2012-06-03T13:27:17.737

0

Use :first-child with the ID or Class of its parent Element. If you are unable to catch the element using CSS, it is suggested to use Javascript or jQuery.

edited Jun 03 '12 at 13:27

answered Jun 03 '12 at 13:05

Riz

9,703
8
38
54

1

It's not a good idea to 'jump to jQuery' immediately. CSS can do what the question is stating if used properly. – Fluidbyte Jun 03 '12 at 13:16

score 0 · Answer 4 · edited Jul 17 '12 at 12:54

0

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

edited Jul 17 '12 at 12:54

Wouter Dorgelo

11,770
11
62
80

answered Jun 03 '12 at 13:14

maksbd19

3,785
28
37

since you are trying to grab the first div then i though it might be helpful – maksbd19 Jun 03 '12 at 14:14

score 0 · Answer 5 · answered Jun 03 '12 at 13:23

If you're really not touching the HTML, then a simple although dirty approach would be to apply styles to the first div and then remove them from subsequent divs, like so:

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

The major drawback here is that some styles in the child divs may get removed unintendedly. Depends on how they're styled in the first place.

How to exclude a class with all children in style definition

5 Answers5

Linked