!importantと継承

基本的に、CSSでは「最後の手段」とすべき!importantですが、かけ方によっては効かないこともありえます。意図的に!importantをかける際にも注意が必要です。

事象

ある処理を組んでいる過程で、「bodyにあるクラスをかけると、ページ全体でマウスカーソルが砂時計になる」という機能を実装しようと考えました。そこで、

失敗例

body.some-class{
  cursor: wait !important;
}

というようにCSSをかけました…が、（明示的にcursorをかけたものを除いて）一部の要素ではマウスカーソルが別な形となったままでした。

原因

さすがに動きとして気になったので、Chromeのデベロッパーツールで追いかけてみると、bodyから継承したcursorは、ばっちり上書きされていました。…input要素などの、デフォルトスタイルに。

どうやら、!importantが付いたプロパティでも、継承された時には通常のプロパティとなってしまうようでした。

対策

ひとまず、全要素に対して!importantをかけることにして解消しました（例はSCSSです）。

改善例

body.some-class{
  cursor: wait !important;
  *{
    cursor: wait !important;
  }
}

その他

CSSでcursor:waitとしても、カーソルの見た目が変わるだけで、ふつうに操作は可能なままです。操作自体を無効にするには、別途の手段が必要です。