title: how work the :not selector
body: <p>I want to select only the buttons without a specific <code>data-filter-group</code>. In this case, where the <code>data-filter-group</code> value is not equal to "genres". </p>
  
  <p>How can I select only these buttons?</p>
  
  <p>The code works fine without the <code>:not()</code> selector, so I don't understand how it works.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
      $("#filters:not([data-filter-group='genres']) button").css("background-color", "yellow");
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="filters"&gt;
      &lt;div class="ui-group"&gt;
          &lt;h3&gt;Genere&lt;/h3&gt;
          &lt;div id="genres" class="button-group js-radio-button-group" data-filter-group="genres"&gt;
              &lt;button class="button is-checked" data-filter=""&gt;All&lt;span&gt;&lt;/span&gt;&lt;/button&gt;
              &lt;button class="button" data-filter=".Action"&gt;Action&lt;span&gt;&lt;/span&gt;&lt;/button&gt;
              &lt;button class="button" data-filter=".Adventure"&gt;Adventure&lt;span&gt;&lt;/span&gt;&lt;/button&gt;
              &lt;button class="button" data-filter=".Animation"&gt;Animation&lt;span&gt;&lt;/span&gt;&lt;/button&gt;
              &lt;button class="button" data-filter=".Comedy"&gt;Comedy&lt;span&gt;&lt;/span&gt;&lt;/button&gt;
              &lt;button class="button" data-filter=".Crime"&gt;Crime&lt;span&gt;&lt;/span&gt;&lt;/button&gt;
              &lt;button class="button" data-filter=".Drama"&gt;Drama&lt;span&gt;&lt;/span&gt;&lt;/button&gt;
              &lt;button class="button" data-filter=".Family"&gt;Family&lt;span&gt;&lt;/span&gt;&lt;/button&gt;
              &lt;button class="button" data-filter=".Fantasy"&gt;Fantasy&lt;span&gt;&lt;/span&gt;&lt;/button&gt;
              &lt;button class="button" data-filter=".Romance"&gt;Romance&lt;span&gt;&lt;/span&gt;&lt;/button&gt;
              &lt;button class="button" data-filter=".ScienceFiction"&gt;Science Fiction&lt;span&gt;&lt;/span&gt;&lt;/button&gt;
              &lt;button class="button" data-filter=".Thriller"&gt;Thriller&lt;span&gt;&lt;/span&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;div class="ui-group"&gt;
          &lt;h3&gt;Registi&lt;/h3&gt;
          &lt;div id="directors" class="button-group js-radio-button-group" data-filter-group="directors"&gt;
              &lt;button class="button is-checked" data-filter=""&gt;All&lt;span&gt;&lt;/span&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ui-group"&gt;
          &lt;h3&gt;Attori&lt;/h3&gt;
          &lt;div id="actors" class="button-group js-radio-button-group" data-filter-group="actors"&gt;
              &lt;button class="button is-checked" data-filter=""&gt;All&lt;span&gt;&lt;/span&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>