web-dev-qa-db-ja.com

特定のクラスを持たない要素を選択するCSSセレクタを書くことはできますか？

私は しない が特定のクラスを持つすべての要素を選択するCSSセレクタルールを書きたいと思います。たとえば、次のようなHTMLがあるとします。

<html class="printable">
    <body class="printable">
        <h1 class="printable">Example</h1>
        <nav>
            <!-- Some menu links... -->
        </nav>
        <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a>
        <p class="printable">
            This page is super interresting and you should print it!
        </p>
    </body>
</html>

この場合は nav および a 要素である "printable"クラスを持たないすべての要素を選択するセレクタを書きたいと思います。

これは可能ですか？

注意：私がこれを使いたい実際のHTMLでは、 don't より多くの要素が "printable"クラスを持つようになるでしょう。上記の例）.

htmlcsscss-selectors
545
David Nordvall

通常は、:not()疑似クラスにクラスセレクタを追加します。

:not(.printable) {
    /* Styles */
}

しかし、もしあなたがより良いブラウザサポートを必要とするなら（IE8以前は:not()をサポートしていません）、おそらく、 do が "printable"クラスを持つ要素のためのスタイルルールを作成するほうが賢明です。実際のマークアップについてあなたが言ったことにもかかわらずそれが実行不可能であるならば、あなたはその制限の周りにあなたのマークアップを働かさなければならないかもしれません。

このルールで設定しているプロパティに応じて、それらのいくつかは are .printableの子孫に継承されるか、または何らかの形でそれらに影響を与える可能性があります。たとえば、displayは継承されませんが、:not(.printable)にdisplay: noneを設定すると、その要素とその子孫がレイアウトから完全に削除されるため、表示されなくなります。代わりにvisibility: hiddenを使うことでこれを回避することができます。これは目に見える子孫を表示することを可能にしますが、隠された要素は元々そうであったようにまだレイアウトに影響します。一言で言えば、ちょうど注意してください。

765
BoltClock
:not([class])

実際には、これはCSSクラス（class="css-selector"）が適用されていないものをすべて選択します。

jsfiddle demoを作りました

    h2 {color:#fff}
    :not([class]) {color:red;background-color:blue}
    .fake-class {color:green}
    <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>

これはサポートされていますか？ はい：Caniuse.com（2014年8月25日にアクセス） ：

  • サポート：88.85％
  • 部分支援：4.36％
  • 合計：93.21％

おかしい編集、私は反対のためにグーグルだった。 CSSの否定？

selector[class]  /* the oposite of :not[]*/
149
Milche Patern

:not negation疑似クラス

否定CSS疑似クラス:not(X)は、単純なセレクタXを引数として取る関数表記です。引数で表されていない要素と一致します。 Xは他の否定セレクタを含んではいけません。

:notを使用すると、通常のCSSセレクタと同じ順序で、一致する要素のサブセットを除外できます。

簡単な例：クラスによる除外

div:not(.class)

クラス.classなしですべてのdiv要素を選択します

div:not(.class) {
  color: red;
}
<div>Make me red!</div>
<div class="class">...but not me...</div>

複雑な例：タイプ/階層による除外

:not(div) > div

別のdivの子ではないすべてのdiv要素を選択します

div {
  color: black
}
:not(div) > div {
  color: red;
}
<div>Make me red!</div>
<div>
  <div>...but not me...</div>
</div>

複雑な例：疑似セレクタの連鎖

:notセレクターと疑似エレメントをチェイン/ネストできないという注目すべき例外を除いて、他の疑似セレクターと組み合わせて使用​​できます。

div {
  color: black
}
:not(:nth-child(2)){
  color: red;
}
<div>
  <div>Make me red!</div>
  <div>...but not me...</div>
</div>

ブラウザのサポート など.

:notは CSS3レベルセレクタ です。サポートの観点からの主な例外は IE9 + です。

この仕様はまた興味深い点を示しています。

:not()擬似体は無駄なセレクタを書くことを可能にします。たとえば、:not(*|*)はまったく要素を表しません、またはfoo:not(bar)はfooと同等ですがより高い特異性を持ちます。

95
SW4

私はこれがうまくいくと思います：

:not(.printable)

から "負のCSSセレクタ"答え .

19
Eregrith

上記の答え：not（）は、効果を作成したりビュー/ DOMを調整したりするのではなく、角度のある形式で非常に効果的になることを貢献したいと思います。

input.ng-invalid:not(.ng-pristine) { ... your css here i.e. border-color: red; ...}

ページの読み込み時に、入力フィールドにデータが追加されている（つまり、元の状態ではなくなっている）が無効である場合にのみ無効（赤枠または背景など）が表示されるようにします。

9
BaneStar007

例 

  [class*='section-']:not(.section-name) {
    @include opacity(0.6);
    // Write your css code here
  }

//不透明度0.6 all "section-"だが "section-name"ではない

3
Hakan

前述のように:not(.class)セレクタを使用できます。

あなたがInternet Explorerの互換性を気にするなら、私はあなたが http://selectivizr.com/ /を使うことを勧めます。

しかし、Apacheの下でそれを実行することを忘れないでください、そうでなければあなたは効果が見えないでしょう。

2
MelkorNemesis

:not()擬似クラスを使う：

特定の要素以外のすべてを選択するためのものです。 :not() CSS擬似クラス を使うことができます。 :not()擬似クラスはその引数としてCSSセレクタを必要とします。セレクターは、引数として指定された要素を除くすべての要素にスタイルを適用します。

例：

/* 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;
}
<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>

この疑似クラスの威力はすでに確認できました。特定の要素を除外することで、セレクタを便利に微調整できます。さらに、この擬似クラス は、セレクター の指定性を高めます。例えば：

/* 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;
}
<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>
0
Willem van der Veen