web-dev-qa-db-ja.com

CSSセレクターではありません

ある種の「not」CSSセレクターはありますか？

たとえば、CSSで次の行を記述すると、クラスclassnameのタグ内のすべての入力フィールドの背景が赤になります。

.classname input {
  background: red;
}

クラスclassnameのタグの外側にあるすべての入力フィールドを選択するにはどうすればよいですか？

csscss-selectors
69
BlaM


現在のブラウザのCSSサポートでは、できません。

新しいブラウザでサポートされるようになりました。詳細については、 サムの答え を参照してください。

（CSSの代替案については他の回答を参照してください。）


JavaScript/jQueryで行うことが許容される場合、次のことができます。

$j(':not(.classname)>input').css({background:'red'});
51
Peter Boughton

Mozillaは、 否定擬似クラス をサポートしています。

:not(.classname) input {background: red;}

参照： http://developer.mozilla.org/en/Mozilla_CSS_support_chart

32
ultracrepidarian

否定擬似クラスは Selectors Level 3 Recommendation にあり、Firefoxの最新バージョン、ChromeおよびSafari（少なくとも）で動作します。以下のサンプルコードに注意してください。

<html>
<head>
<title>Negation pseudo class</title>
<style type="text/css">
    div {
    border: 1px solid green;
    height: 10px;
    }
    div:not(#foo) {
    border: 1px solid red;
    }
</style>
</head>
<body>
    <div id="foo"></div>
    <div id="bar"></div>
    <div id="foobar"></div>
</body>
</html>
29
Sam Dutton

「グローバル」背景を赤に設定し、クラス名を使用して他のものを変更することで、そうしませんか？

input { background: red; }
.classname input { background: white; }
24
Harper Shelby

こうする

input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }
10
Daniel A. White

CSSで一致した要素の親を選択する方法はありません。 JavaScriptを使用して選択する必要があります。

あなたの質問から、多かれ少なかれこのようなマークアップがあると思います：

<form class="formclassname">
    <div class="classname">
        <input />  <!-- Your rule matches this -->
        <input />  <!-- Your rule matches this -->
    </div>
    <input />  <!-- You want to select this? -->
    <input />  <!-- You want to select this? -->
</form>

1つのオプションは、クラスを上位の要素に追加することです。たとえば、<form>、およびフォームのすべての入力をスタイルするルールを記述します。 I.E：

.formclassname input {
  /* Some properties here... */
}

または

.formclassname > input {
  /* Some properties here... */
}

特定のクラスを持つ要素の内部にないという事実に基づいてそれらを選択したい場合、JavaScriptを使用しないと運が悪くなります。

1
Zack The Human

あなたが得ることができる最も近いのは、宣言を持つ直接の子孫にのみ影響を与えることだと思います

たとえば、このコードは、クラス「maincontent」を持つdivの直下の入力フィールドにのみ影響します

div.maincontent > input {
  // do something
}
0
Dan Roberts

入力は、他のほとんどのhtml要素とは異なり、すべてのcssプロパティをデフォルト値にリセットする方法があるとは限らないため、少し面倒です。

スタイリングが重要でない場合（つまり、機能に影響を与えないニース）、jQueryを使用してすべての入力の配列を取得し、それらの親を確認し、そのdivの外部のスタイリングのみを実行します。何かのようなもの：

$('input').each(function() {
     if($(this).closest('.classname') == false)
     {
           // apply css styles
     }
});

（ちなみに、私はjQueryの専門家ではないので、上記にいくつかのエラーがあるかもしれませんが、原則としてこのようなものが機能するはずです）

0
wheresrhys