CSS NOT selector to exclude a class and its children

Question

I used this code to make sure nothing overflows responsive divs:

.responsive * {width:100%}

However I have some sub elements that I want to exclude them and their children from the above rule. So I updated the rule to this:

.responsive  * :not(.fixedSize,.fixedSize *){max-width:100%;}

the above code seems to exclude everything.

div {width:200px;border:1px solid #ff0000;line-height:40px;}
input {width:300px;}
.responsive  * :not(.fixedSize,.fixedSize *){max-width:100%;}

<div class="responsive">
   <input>
   <div class="fixedSize">
      <input>
   <div>
</div>

Edit:

I alseo tried this but not working yet:

 .responsive  * :not(.fixedSize):not(.fixedSize *){max-width:100%;}

Your selector is looking at a third sublevel, `:not()` takes only one simple selector. here `.responsive *{max-width:100%;box-sizing:border-box}` excluding a class: `.responsive :not(.fixedSize) {max-width:100%;box-sizing:border-box}` would do the job. Note and mind the box-sizing rule if not applied earlier. — G-Cyrillus, Dec 10 '17 at 22:30
I don't know that space between `:not()` and `*` is typo failure or you missed that in your real code (remove that) and also as ppl mentioned `:not()` accept just single selector but you can use something like this `.elmenet:not(.this):not(that)` — Colin Cline, Dec 10 '17 at 22:38
Your suggestion is not excluding the fixedSize elements and their children.@G-Cyr — Ali Sheikhpour, Dec 10 '17 at 22:44
@AliSheikhpour `.responsive *:not(.fixedSize){max-width:100%;}` and `.responsive *:not(.fixedSize) *{max-width:100%;}` — Colin Cline, Dec 10 '17 at 22:47
Please post your answer as a snippet. I checked it but not working yet. @ColinCline — Ali Sheikhpour, Dec 10 '17 at 23:11
The heck does "too unprofessional to use the global selector" mean. — BoltClock, Dec 11 '17 at 03:31
@BoltClock imagine you create a plugin/widget for a Joomla or any other platforms, but the host owner added a global selector `*` to his stylesheet. Your plugin is good as it is, but when it will overridden by `*`, your plugin is no more looks good at all. You had to add `!important` to your plugin stylesheet or add exactly same properties that `*` add to your element But with your own value so they wont overridden by `*`. That cause too much problem for other coders so it is unprofessional. — Colin Cline, Dec 11 '17 at 16:24

score 1 · Answer 1 · 2017-12-10T22:43:48.667

1

Were you trying to achieve this? As the other people mentioned in the comments as well, :not is a single selector and thus you can make only an individual id or class within it.

.responsive {
  width: 200px;
  border: 1px solid #ff0000;
  line-height: 40px;
}

input {
  width: 300px;
}

.responsive *:not(.fixedSize) {
  max-width:100%;
}

<div class="responsive">
  <input>
  <input>
  <input class ="fixedSize">
</div>

edited Dec 10 '17 at 22:43

answered Dec 10 '17 at 22:29

1

Why limited to first depth lvl childs? – Colin Cline Dec 10 '17 at 22:30
`>` mean only 1st lvl depth children and `>*` every elements (regardless be div or so) in 1st lvl depth – Colin Cline Dec 10 '17 at 22:32
@ColinCline I unintentionally added that since it had just 1 child for this example but updated it. – Dec 10 '17 at 22:34
The new edition is not excluding deeper children of fixedSize elements yet. – Ali Sheikhpour Dec 10 '17 at 22:47
That's not how :not functions as I mentioned in my post and they mentioned in their comments. You need to exclude them individually since it is a single selector. You can use :not(.class1):not(.class2):not(:class3).. and so on. – Dec 10 '17 at 22:49
1

`:not()` only accepts one selector within it *for now*, but the level 4 spec does allow for multiple selectors. – jhpratt Dec 10 '17 at 23:06

CSS NOT selector to exclude a class and its children

1 Answers1