CSS「and」および「or」


113

いくつかの入力タイプのスタイリングから分析する必要があるので、私はかなり大きな問題を抱えています。私は次のようなものを持っていました:

.registration_form_right input:not([type="radio")
{
 //Nah.
}

しかし、私もチェックボックスのスタイルを設定したくありません。

私はもう試した:

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

使い方は&&||もうすぐ使う必要があり、使い方は同じだと思います。

アップデート:
私はまだ使用する方法がわからない||&&、正しく。W3ドキュメントに何も見つかりませんでした。


17
"アナセマタイズ" Yikes。神の報復でチェックボックスをスタイルしようとする人々を脅迫したいですか?(おそらく「免除」または類似のものを意味します。たとえば、「一部の入力タイプをスタイリングルールから免除する必要があります。」)
TJ Crowder

3
まあ、私は自分の言語から句動詞への適切な翻訳を見つけることができませんでした;)
Misiur

4
@TJ Crowderはおそらくそれを理解したと思います。しかし、それ面白かった...特に彼のスペルミスの「神」の皮肉= D
デビッドはモニカを

素晴らしいngramですが。; ^)
16年

回答:


141

&& 次のように複数のセレクターをつなぎ合わせて機能します:

<div class="class1 class2"></div>

div.class1.class2
{
  /* foo */
}

もう一つの例:

<input type="radio" class="class1" />

input[type="radio"].class1
{
  /* foo */
}

|| 複数のセレクターを次のようにカンマで区切ることで機能します。

<div class="class1"></div>
<div class="class2"></div>

div.class1,
div.class2
{
  /* foo */
}

1
わかりました、光をありがとう。スタイリングフォームは嫌いですが、それは私の仕事であり、サイトは私のものではありません。入力にクラスを適用します。
Misiur

5
ここではどのようなInternet Explorerのサポートの便利なチャートです:msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#selectors
geofflee

12
誰が今IEを使用しているのか:)
Tarun

2
notIE9以降で動作するようです(@geoffleeによって提供されたチャートのおかげです)。
SharpC 2017年

1
2018年の古いバージョンのIEのサポートに本当に関心がありますか?Microsoftもそうではありません。
アノマリー2018年

48

AND(&&):

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

または(||):

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

いや、失敗も。1対2および2対1で適用されます
Misiur

@KennyTM:見てください。コンマを使用すると、次のようになります。.registration_form_right input:not([type = "radio"])は、チェックボックスを含むすべてに適用され、.registration_form_right input:not([type = "checkbox"])はラジオ
Misiur

@その他:もちろんです。2つ目は「OR」(別名||)の場合です。明確にするために更新されました。
kennytm

1
@KennyTM:Misiurが言おうとしているのは…あなたの "||" 例は構文的に正しいですが、式を簡略化すると、2つのセレクターの和集合にすべての入力が含まれるため、式は単に「.registration_form_right input」になります。
ジオフリー

@ geo、@ Mis:見て、「すぐに||を使用する必要がある」という質問なので、これは||例からaを構築する方法です。もちろん.registration_form_right input簡略化後になります,||が、本質的にはas を使うことですinput:not([type="radio"]), input:not([name="foo"])重要な例として使用できます。
kennytm

16

要素のプロパティaAND を選択するbにはX

X[a][b]

要素のプロパティaOR を選択するbにはX

X[a],X[b]

4

:not擬似クラスは、IEでサポートされていません。代わりに次のようなものが必要です:

.registration_form_right input[type="text"],
.registration_form_right input[type="password"],
.registration_form_right input[type="submit"],
.registration_form_right input[type="button"] {
  ...
}

いくつかの重複がありますが、より高い互換性のために支払うことは少額です。


2

&と:notを使用して、 "OR"の動作を何らかの方法で再現できます。

SomeElement.SomeClass [data-statement="things are getting more complex"]  :not(:not(A):not(B))     {
    /* things aren't so complex for A or B */
}

2
:not(:not)は有効なCSS構文ではありません。jQueryでも動作します。
Serge Profafilecebook 2014年

1

より多くのセレクターを作成してコンマで区切るのは嫌だと思いますか?

.registration_form_right input:not([type="radio"]),  
.registration_form_right input:not([type="checkbox"])  
{  
}

ちなみにこれ

not([type="radio" && type="checkbox"])  

「これらの両方のタイプを持たない入力」のように私に見えます:)


2
最初のセレクタは以外をすべて選択するためradio(ただし選択するためcheckbox)、2番目のセレクタはその逆を行うため、これは機能しません。2の労働組合は、両方が含まれますcheckbox radio
エリック

その最初の例はそれらを一緒に&&せず、最初のセレクターのラジオではない入力、およびすべての入力を意味するチェックボックスではない入力に対して発火します:-)
Dan F

あなたが間違っている。次に、1番目が2番目に、2番目が1番目に適用されます。
Misiur

1

誰かが私のように立ち往生している場合に備えて。ポストといくつかのヒットとトライアルを通過した後、これは私のために働きました。

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

1

注意の言葉。複数のnotセレクターをつなぎ合わせると、結果のセレクターの特異性が高まるため、オーバーライドが難しくなります。基本的に、すべてのノットを持つセレクターを見つけて、新しいセレクターにコピーアンドペーストする必要があります。

not(X or Y)セレクタは、特異性を膨らませる避けるために素晴らしいことだが、私たちはのように、反対を組み合わせることに固執する必要がありますねこの回答

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.