CSS not selector is excluding all elements

Question

I have a default class for my form which is defining some styles rules (scss format) like this:

form.simple_form {

  $indent: 200px;   
  $length: 350px;
  .... 
}

In some cases, I need other set of style rules to be applied to my forms, but I am not able to remove the simple_form default class from them (each form in my application is created with simple_form class).

Fortunately, I am able to set additional class of each form and using not css selector I am able not to apply the default form class for each form like this:

form.simple_form:not(.signup, .login) {

  $indent: 200px;
  $length: 350px;
  ....
}

That is working perfectly, but for some reason, the simple_form class is not applied for all forms no matter that they have not got the signup or login classes.

So, why the css selector is not able to get a form with simple_form class? Something more, If I paste in the console the following code:

$('form.simple_form:not(.signup, .login)')

It successfully returns the form.

Please note, that I am using ruby on rails and simple_form gem.

EDIT:

This is the HTML of the form that I want to select:

<form accept-charset="UTF-8" action="/webinars" class="simple_form new_webinar" data-remote="true" data-type="js" data-validate="true" enctype="multipart/form-data" id="new_webinar" method="post" novalidate="novalidate">
....
</form>

This is the HTML that I do not want to select:

<form accept-charset="UTF-8" action="/sessions" class="simple_form login" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="kmDnV10Pv3eQz09U9QKTjfLQ7zweu6teALh4DDjYmfk="></div>
...
</form>

Answer 1

The problem you're having seems to be the use of a comma-separated list of selectors within the :not() selector, each element to be removed must be selected ('unselected'?) one at a time (certainly in Chromium 25, Ubuntu 12.10).

Given the following HTML:

<p>No classes</p>
<p class="test">With class 'test'</p>
<p class="test1">With class 'test1'</p>

The following works:

p {
    color: #f00;
}

p:not(.test):not(.test1) {
    color: #000;
}

JS Fiddle demo.

Whereas the following (similar approach to yours) does not:

p {
    color: #f00;
}

p:not(.test, .test1) {
    color: #000;
}

JS Fiddle demo.