CSS for a div and its children excluding one particular child and that child's children

Question

I have nested blocks like this, I don't know how many nested block there :

<div class="my-class">
   ...
   <div class="exclude-my-class">
      <div>
      </div>
   </div>
   <div>
      <div>
      </div>
   </div>
   ...
</div>

I want to write styles for "my-class" and its children but exclude "exclude-my-class" and its children using css. I don't know in which level can be "exclude-my-class" classes

Something like

.my-class:not(.exclude-my-class), 
.my-class *:not(.exclude-my-class, .exclude-my-class *){
    //styles
}

How do I achieve this?

I don't know how many nested blocks there, so > cant work , it for only first level childs — Tigran Babajanyan, Aug 28 '17 at 07:59
Your children of my class has a class 2 (which isn't a good name but what ever i guess it's an example). So you would just have to do .2:not(.exclude-my-class) 3. 3 is supposed to be the children right? — user5014677, Aug 28 '17 at 08:11
That numbers are just for displaying nested blocks, I dont know about that classes, Try to understand problem and suggest any solution if you can, not just type something. — Tigran Babajanyan, Aug 28 '17 at 08:17
Chill. You wrote something incorrect in your question and you want someone to randomly understand your thoughts. If you can't explain correctly what's your problem and expect someone to understand that wht you wrote doesn't exist in your real code then you have some issues understanding human intercations. — user5014677, Aug 28 '17 at 08:19
Why are you downwote me, because of in my code class names 1, 2, 3 ? — Tigran Babajanyan, Aug 28 '17 at 08:25
@TigranBabajanyan Will the div being skipped always at the first position? — zer00ne, Aug 28 '17 at 08:30
@TigranBabajanyan multiple nested blocks is not a concern, take a look at my answer and you'll understand what I'm asking. — zer00ne, Aug 28 '17 at 12:05
@ser00ne in this case your solution not working https://jsfiddle.net/n0jpkxzL/7/ — Tigran Babajanyan, Aug 28 '17 at 12:21
@TigranBabajanyan Ah, I see. You should edit your question to include these particulars otherwise you will have to explain each of these aspects to each person foolish enough to help you. Good luck, sir. — zer00ne, Aug 29 '17 at 20:51

score 1 · Answer 1 · answered Aug 28 '17 at 08:21

The question has been asked before.

Borrowing from this answer, you can’t. The :not() pseudo-class in Selectors level 3 is very limited by itself. You can only pass a single simple selector as an argument to :not(). This means you can pass only any one of these at a time:

Universal selector (*), optionally with a namespace
Type selector (a, div, span, ul, li, etc), optionally with a namespace
Attribute selector ([att], [att=val], etc), optionally with a namespace
Class selector (.class)
ID selector (#id)
Pseudo-class (:pseudo-class)

user5014677 · Answer 2 · 2017-08-28T09:52:11.910

0

HTMl:

<div class="my-class">
   <div class="exclude-my-class">
      <div >
        Skipped
      </div>
   </div>
   <div>
      <div>
      not skipped
      </div>
   </div>   

   <div class="exclude-my-class">
      <div >
      skipped
      </div>
      <div >
      skipped
      </div>
   </div>
    <div>
      <div>
      not skipped
      </div>
      <div>
      not skipped
      </div>
   </div>   
    <div>
      <div>
      not skipped
      </div>
   </div>   
    <div>
      <div>
      not skipped
      </div>
   </div>   
</div>

CSS: Select all the children of the children of my-class but not children if the direct child of my-class is exclude my class.

.my-class div:not(.exclude-my-class) div{
    background-color: red;
}

CSS: Select all the children of my class but not children with exclude-my-class.

.my-class > div:not(.exclude-my-class){
    background-color: red;
}

edited Aug 28 '17 at 09:52

answered Aug 28 '17 at 08:44

user5014677

694
6
22

Its not solution for me, beacause of there can be many nested blocks – Tigran Babajanyan Aug 28 '17 at 09:39
Many nested blocks where? In this solution every block is taken in to account. You can have a lot of exclude my class. @TigranBabajanyan – user5014677 Aug 28 '17 at 09:42
this is your code result https://jsfiddle.net/n0jpkxzL/1/ or https://jsfiddle.net/n0jpkxzL/2/ – Tigran Babajanyan Aug 28 '17 at 09:45
You are a generous, but as I said there can be many nested blocks like this https://jsfiddle.net/n0jpkxzL/4/ – Tigran Babajanyan Aug 28 '17 at 09:57
In the first selector you can replace to `.my-class div:not(.exclude-my-class) ****` it will work in your last example. @TigranBabajanyan – user5014677 Aug 28 '17 at 10:02
As i said skipped div not always at the first position https://jsfiddle.net/n0jpkxzL/6/ – Tigran Babajanyan Aug 28 '17 at 10:07
2

@TigranBabajanyan Add to your main question all the relevant info. You keep adding new stuff every time. Edit your question and add every possible case you have. – user5014677 Aug 28 '17 at 10:08

score -1 · Answer 3 · answered Aug 28 '17 at 07:58

-1

Use below code

.my-class : not(.exclude-my-class)

answered Aug 28 '17 at 07:58

BALAJI R

73
1
11

Its absolutely not solution, it will exlude only childs which have class "exclude-my-class", not its childs – Tigran Babajanyan Aug 28 '17 at 08:04

CSS for a div and its children excluding one particular child and that child's children

3 Answers3