【CSS】htmlでclassを消すと変わるのに、cssでclassを消すと何も変わらない現象

Question

前提・実現したいこと

Railsでアプリ作成中で、bootstrap導入しhtmlをいじっています。
モーダルの影を消したいため、htmlとcssをいじっていたのですが、htmlのclassを消すと変化があるのに、cssのclassを消すと変化がないのがなぜなのかわかりません。

発生している問題・エラーメッセージ

以下Bootstrapです。

.modal-content {
  position: relative;
  background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .1);
          box-shadow: 0 3px 9px rgba(0, 0, 0, .1);
}

以下HTMLの該当箇所です。

<div class="modal " id="demoNormalModal" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">
 <div class="modal-dialog modal-dialog-centered" role="document"> 
 <div class="modal-content" >
   <div class="modal-header">
    <h5 class="modal-title" id="demoModalTitle">プロフィール編集</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
     </div>
    <%= form_for current_user do |f| %>
    <div class="modal-body">
    </div>
    <div class="modal-footer">
    </div>
    <% end %>
   </div>
  </div>
 </div>

補足情報（FW/ツールのバージョンなど）

modal=contentは、@mediaで書かれているとこもありましたので、そちらもCSSで削除しましたが、変化がありませんでした。

Comments

[azuapricot]

CSSが変わらないと嘆いている方の大半はキャッシュクリアしていない方なんですが、もちろんしていますよね・・・？
F12を押してディベロッパーツールを開く→更新ボタン右クリック→キャッシュクリアとハードの再読み込み

[Romay]

それはしていなかったのですが、それをやってみても変化がありませんでした。shadowだと思われるCSSは消しているはずなのに、影がついているままです...。

[yoshinavi]

CSSを消した時に、ツールでの確認はどうなっていますか？
該当CSSが１ヶ所でなく、複数ヶ所存在する可能性がありますが、確認されていますか？

Answer 1

Bootstrapのドキュメントのサンプルで確認しました。


それぞれの.modal-contentセレクタ内の-webkit-box-shadowとbox-shadowを無効にしたところ影は消えました。

ただ、影を無効にしたいのであれば.modal-content要素に

<div class="modal-content" style="box-shadow: none;">

直接スタイルを指定するか、

.no-shadow-modal .modal-content {
    box-shadow: none;
}

のようにスタイルを指定して、.modal要素にno-shadow-modalクラスを追加するなどのやり方があります。