1

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>
Improve this question
7
  • Please show an example of the HTML you wish the CSS rule to match and the HTML you wish the rule to not match. Commented Jun 8, 2013 at 8:32
  • @jfriend00 I have edited the question and post both the forms I do want and do not want to select. Commented Jun 8, 2013 at 8:45
  • I think that $('form.simple_form:not(.signup, .simple_form)') will return all the forms, even signup. I think that the correct syntax is $('form.simple_form:not(.signup):not(.simple_form)') Commented Jun 8, 2013 at 9:01
  • What browser are you testing in? Commented Jun 8, 2013 at 9:02
  • Chrome (Version 27.0.1453.110) using Ubuntu 13.04. I should have CSS3 selectors support. Commented Jun 8, 2013 at 9:04

1 Answer 1

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

An explanation can be found in the duplicate I've just linked to - it's a discrepancy between jQuery and CSS.
@BoltClock My question does not have anything in common with the ref one by you. I need a working CSS selector. I am not asking why the jQuery gives me the result.
@BoltClock: what does this have to do with jQuery?
@Jawad: The console code that the OP is using works, so it must be jQuery. No other library supports :not() like that.
@gotqn: How are the questions different? Both are asking why the selector doesn't work in CSS, but works in jQuery, and how it can be done using CSS, and the answers both provide the same solution.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.