Q&A
https://jsfiddle.net/x07twao8/4/
上記のように適用されるのですが、ご指摘とはまた違うものでしょうか。
notに対して、仕様を読んだのですが、特定のclassを除外した特定のタグにだけ適用する方法を適切に理解できなかったため、ねんのために確認させてください
下記のように、"b"というclassが設定されているdivタグ以外のdivにcssを適用したいのですが
notが効きません。
以下の記法に従っていると思えるのですが、いずれの点にもんだいがあるのでしょうか？
MDN
宜しくお願い申し上げます。
html
1<div>a</div> 2<div class="b">b</div> 3<div>c</div> 4<div>d</div>
css
1div :not(.b){ 2color:red; 3}
回答6件
0
div :not(.b){
↓
div:not(.b){
スペースが入っていたら連動性が失われます。
投稿2018/08/17 05:28
総合スコア80888
0
ベストアンサー
div と :not(.b) の間にスペースが空いているので
「divの子要素のうち、classがbでないもの」に対して適用されています。
スペースを消し、div:not(.b)とすればよいです。
ちなみに、ご提示のコードですと、.bだけでなく他のdivにもスタイルが適用されないと思います。
投稿2018/08/17 05:34
退会済みユーザー
総合スコア0
リンク先を見ました。
<div class="b">b<p>甲</p></div>
おそらくこの「甲」についておっしゃってると思いますが、
<div>b<p class="b">甲</p></div>
こういうパターンのときに適用されないということです。
divの下にclassがbのもの、そうでないものを混ぜて
div :not(.b)（スペースあり）を適用するとお分かりいただけるかと思います。
コメント有難うございます。
なるほど、以下のものもnotが適用されませんでした。
<div>a</div>
<div>b<div class="b">甲</div></div>
<div>c</div>
<div>d</div>
おそらくnotではなくdivであることが優先される仕様かと思いますが
確認してみます。
ご教示頂き、本当に有難うございました！
0
divとスペース:not(b)の間にスペースがあるのがダメです．div:not(.b)にしてください
ちなみに，そのCSSだと
html
1<div> 2 <p>赤文字になるよ</p> 3 <div>これも赤文字になるよ</div> 4 <a href="#">これも赤文字になるよ</a> 5</div> 6<div> 7 赤文字じゃないけど何か？ 8</div>
こうなります
参考
投稿2018/08/17 05:30
編集2018/08/17 06:19
総合スコア1284
コメントありがとうございます。
すみません、誤認があるのかもしれませんが、
<div>a</div>
<div class="b">b<p>甲</p></div>
<div>c</div>
<div>d</div>
div:not(.b){
color:red;
}
こちらで甲は赤字にはなっていないのですが、異なる意味での警鐘を頂いているのでしょうか？
宜しくお願い申し上げます。
分かりづらくてすみません，div_:not(.b)になっているときの話です（「_」はスペースの代わり）
回答に，画像を追加しときます
コメントありがとうございます。
申し訳ございません、前提に誤りがありましたね。
了解いたしました、大変助かりました。
0
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 div:not(.b){ 8 color:red; 9 } 10 </style> 11 </head> 12 <body> 13 <div>a</div> 14 <div class="b">b</div> 15 <div>c</div> 16 <div>d</div> 17 </body> 18</html> 19
投稿2018/08/17 05:29
退会済みユーザー
総合スコア0
コメントを頂き有難うございます。自己解決方法と同じ動作でした。
他の方からのコメントでdiv:not(.b)のセレクタの指定でも
「document"内のclass="b"が設定されているタグ以外の全てのdivタグだけに特定のcssを適用する」
ということにはならないというコメントを頂いているので、別途調べております。
0
失礼いたしました、単純なコードのミスで
下記の修正で意図した動作を確認できました。
誤) div :not(.b)
正) div:not(.b)
投稿2018/08/17 05:29
総合スコア318
回答しておいてなんですが、この内容の回答を自己解決とするのは違う気がします。
別の観点の解決策ならまだいいのですが、この質問についた多くの回答と同じ内容です。（私が低評価つけたわけではないですが、おそらく上記の理由からかと）
コメントありがとうございます。実は、投稿した直後に自己解決も投稿したためです、本当はベストアンサーをつけたい回答があったのですが、自己解決を解除する方法が見つけられませんでした。
申し訳ございません。
質問を投稿したことがないので自己解決はわからないですがベストアンサーを解除できる方法はあったとは思います。
もしあれでしたら運営に相談されてはいかがでしょうか。
無事、運営に確認して対応できました！
各コメントのアイコンの下に、未解決に戻すといううす～いグレイアウトした選択肢がありました。
宜しくお願い申し上げます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/17 05:30