web-dev-qa-db-ja.com

：not（）擬似クラスは複数の人数を持つことができますか？

inputとtypeを除くすべてのradioのcheckbox要素を選択しようとしています。

:notに複数の引数を入れることができることを多くの人が示していますが、typeを使用してもうまくいかないようですが、試してみます。

form input:not([type="radio"], [type="checkbox"]) {
  /* css here */
}

何か案は？

csscss3css-selectors
679
delphi

理由：2つの:notを使用しないでください。

input:not([type="radio"]):not([type="checkbox"])

はい、意図的です

1383
Felix Kling

あなたのプロジェクトでSASSを使っているのであれば、私はみんながそれを望んでいるようにうまく動作させるためにこのmixinを作りました：

@mixin not($ignorList...) {
    //if only a single value given
    @if (length($ignorList) == 1){
        //it is probably a list variable so set ignore list to the variable
        $ignorList: nth($ignorList,1);
    }
    //set up an empty $notOutput variable
    $notOutput: '';
    //for each item in the list
    @each $not in $ignorList {
        //generate a :not([ignored_item]) segment for each item in the ignore list and put them back to back
        $notOutput: $notOutput + ':not(#{$not})';
    }
    //output the full :not() rule including all ignored items
    &#{$notOutput} {
        @content;
    }
}

それは2つの方法で使用することができます。

オプション1：無視された項目をインラインにリストする 

input {
  /*non-ignored styling goes here*/
  @include not('[type="radio"]','[type="checkbox"]'){
    /*ignored styling goes here*/
  }
}

オプション2：無視された項目を最初に変数にリストする 

$ignoredItems:
  '[type="radio"]',
  '[type="checkbox"]'
;

input {
  /*non-ignored styling goes here*/
  @include not($ignoredItems){
    /*ignored styling goes here*/
  }
}

どちらのオプションでも出力されたCSS 

input {
    /*non-ignored styling goes here*/
}

input:not([type="radio"]):not([type="checkbox"]) {
    /*ignored styling goes here*/
}
42
Daniel Tonon

CSS 4からは:notセレクタで複数の引数を使用することが可能になりました（ こちらを参照 ）。

CSS 3では、：notセレクタは引数として1つのセレクタしか許しません。レベル4のセレクタでは、セレクタリストを引数として取ることができます。

例：

/* In this example, all p elements will be red, except for 
   the first child and the ones with the class special. */

p:not(:first-child, .special) {
  color: red;
}

残念ながら、ブラウザのサポートは 制限 です。今のところ、それはSafariでしか動作しません。

27
Pieter Meiresone

私はこれでいくらか問題を抱えていました、そして、 "X：not（）：not（）"メソッドは私のために働いていませんでした。

私はこの戦略に頼ってしまいました。

INPUT {
    /* styles */
}
INPUT[type="radio"], INPUT[type="checkbox"] {
    /* styles that reset previous styles */
}

それほど面白くはありませんが、次のようなときには役に立ちました。理想的ではありませんが、しっかりしています。

7
eatCasserole

"cssnext" Post CSSプラグインを にインストールすれば、今すぐに使いたい構文を安全に使い始めることができます。

Cssnextを使用すると、これが変わります。

input:not([type="radio"], [type="checkbox"]) {
  /* css here */
}

これに：

input:not([type="radio"]):not([type="checkbox"]) {
  /* css here */
}

http://cssnext.io/features/#not-pseudo-class

4
Daniel Tonon