могу ли я написать селектор css, выбирающий элементы, не имеющие определенного класса?

<p>обычно вы добавляете селектор класса в псевдокласс <code>:not()</code> следующим образом:</p><pre><code>:not(.printable) { /* styles */ } </code></pre><p>но если вам нужна лучшая поддержка браузера (ie8 и старше не поддерживают <code>:not()</code>), вам, вероятно, лучше создавать правила стиля для элементов, которые <em>do</em> имеют класс "printable". если даже это неосуществимо, несмотря на то, что вы говорите о фактической наценке, вам, возможно, придется обойтись без этого ограничения.</p><p>помните, что в зависимости от свойств, которые вы устанавливаете в этом правиле, некоторые из них могут либо наследоваться потомками, которые <em>являются</em> <code>.printable</code>, либо иным образом влиять на них так или иначе. например, хотя <code>display</code> не наследуется, установка <code>display: none</code> для <code>:not(.printable)</code> не позволит отображать его и всех его потомков, поскольку он полностью удаляет элемент и его поддерево из макета. вы часто можете обойти это, используя вместо этого <code>visibility: hidden</code>, который позволит отображать видимых потомков, но скрытые элементы будут по-прежнему влиять на макет, как они изначально это делали. короче, просто будь осторожен.</p>

<pre><code>:not([class]) </code></pre><p>фактически, это выберет все, к чему не применен класс css (<code>class="css-selector"</code>).</p><p>я сделал <a href="http://jsfiddle.net/7zrx4/">jsfiddle</a> демо</p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code> h2 {color:#fff} :not([class]) {color:red;background-color:blue} .fake-class {color:green}</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code> <h2 class="fake-class">fake-class will be green</h2> <h2 class="">empty class should be white</h2> <h2>no class should be red</h2> <h2 class="fake-clas2s">fake-class2 should be white</h2> <h2 class="">empty class2 should be white</h2> <h2>no class2 should be red</h2></code></pre></div> </div><p><strong> поддерживается ли это? </strong> <a href="http://caniuse.com/#feat=css-sel3">да: caniuse.com (по состоянию на 25 августа 2014 г.)</a> :</p><ul> <li>поддержка: 88,85%</li> <li>частичная поддержка: 4,36%</li> <li>итого: 93,21%</li> </ul><p>забавно редактировать, я гуглил по противоположности: нет. css отрицание?</p><pre><code>selector[class] /* the oposite of :not[]*/ </code></pre>

<h2> <a href="https://developer.mozilla.org/en-us/docs/web/css/:not"><code>:not</code></a> псевдо-класс отрицания</h2><blockquote> <p>псевдокласс css отрицания, <code>:not(x)</code>, является функциональной нотацией, принимающей простой селектор x в качестве аргумента. он соответствует элементу, который не представлен аргументом. x не должен содержать другой селектор отрицания.</p> </blockquote><p>вы можете использовать <code>:not</code>, чтобы исключить любое подмножество совпадающих элементов, упорядоченных так же, как и обычные селекторы css.</p><hr><h2>простой пример: исключая по классу</h2><p><code>div:not(.class)</code></p><p>выбрал бы все элементы <code>div</code> без класса <code>.class</code></p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>div:not(.class) { color: red; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div>make me red!</div> <div class="class">...but not me...</div></code></pre></div> </div><hr><h2>сложный пример: исключение по типу/иерархии</h2><p><code>:not(div) > div</code></p><p>выбрал бы все элементы <code>div</code>, которые не являются потомками другого <code>div</code></p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>div { color: black } :not(div) > div { color: red; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div>make me red!</div> <div> <div>...but not me...</div> </div></code></pre></div> </div><hr><h2>сложный пример: цепочка псевдоселекторов</h2><p>с заметным исключением того, что вы не можете соединять/вкладывать <code>:not</code> селекторы и псевдоэлементы, вы можете использовать их вместе с другими псевдо селекторами.</p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>div { color: black } :not(:nth-child(2)){ color: red; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div> <div>make me red!</div> <div>...but not me...</div> </div></code></pre></div> </div><hr><h2> <a href="http://caniuse.com/#search=%3anot">поддержка браузера</a> и т.д.</h2><p><code>:not</code> --- это <a href="http://dev.w3.org/csswg/selectors-3/#negation"><strong> селектор уровня css3 </strong></a> , главное исключение с точки зрения поддержки - <strong> ie9 + </strong></p><p>спецификация также делает интересный момент:</p><blockquote> <p>псевдо <code>:not()</code> позволяет писать бесполезные селекторы. например, <code>:not(*|*)</code>, который вообще не представляет элемента, или <code>foo:not(bar)</code>, что эквивалентно <code>foo</code>, но с более высокой специфичностью.</p> </blockquote>

<p>я думаю, что это должно работать:</p><pre><code>:not(.printable) </code></pre><p>от <a href="https://stackoverflow.com/questions/726493/negative-css-selectors">ответ "отрицательный селектор css"</a> .</p>

<p>просто хочу подчеркнуть, что приведенные выше ответы: not () могут быть очень эффективными в формах angular, а не создавать эффекты или настраивать представление/dom,</p><pre><code>input.ng-invalid:not(.ng-pristine) { ... your css here i.e. border-color: red; ...} </code></pre><p>гарантирует, что при загрузке вашей страницы в полях ввода будут отображаться недействительные (красные границы или фоны и т.д.), если к ним добавлены данные (т. е. больше нет нетронутых), но они недействительны.</p>

<p><strong>пример</strong></p><pre><code> [class*='section-']:not(.section-name) { @include opacity(0.6); // write your css code here } </code></pre><p>// непрозрачность 0.6 все "section-", но не "section-name"</p>

<p>вы можете использовать селектор <code>:not(.class)</code>, как упоминалось ранее.</p><p>если вам нужна совместимость с internet explorer, я рекомендую вам использовать <a href="http://selectivizr.com/">http://selectivizr.com/</a> .</p><p>но не забудьте запустить его под apache, иначе вы не увидите эффекта.</p>

<h2>использование псевдо-класса <code>:not()</code>:</h2><p>для выбора всего, кроме определенного элемента (или элементов). мы можем использовать <code>:not()</code> <strong>псевдокласс css</strong>. псевдокласс <code>:not()</code> требует в качестве аргумента селектор <code>css</code>. селектор будет применять стили ко всем элементам, кроме элементов, указанных в качестве аргумента.</p><h2>примеры:</h2><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>/* this query selects all div elements except for */ div:not(.foo) { background-color: red; } /* selects all hovered nav elements inside section element except for the nav elements which have the id foo*/ section nav:hover:not(#foo) { background-color: red; } /* selects all li elements inside an ul which are not odd */ ul li:not(:nth-child(odd)) { color: red; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div>test</div> <div class="foo">test</div> <br> <section> <nav id="foo">test</nav> <nav>hover me!!!</nav> </section> <nav></nav> <br> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul></code></pre></div> </div><p>мы уже можем видеть мощь этого псевдокласса, он позволяет нам удобно точно настраивать наши селекторы, исключая определенные элементы. кроме того, этот псевдокласс <strong>увеличивает специфичность селектора</strong>. например:</p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>/* this selector has a higher specificity than the #foo below */ #foo:not(#bar) { color: red; } /* this selector is lower in the cascade but is overruled by the style above */ #foo { color: green; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="foo">"lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div></code></pre></div> </div>