日々精進

新しく学んだことを書き留めていきます

:not疑似クラスの便利な使い方

疑似クラス便利ですね。 今回は以下のようにボタンのスタイルをdisabledな時とそうでないときで分けるために使いました。

my-btn:hover[disabled] {
  color: $baseColor;
  font-weight: bold;
  background-color: $accentColor;
  border: 2px solid darken($accentColor, 7.5%);
  cursor: pointer;
}
my-btn:hover:not([disabled]) {
  color: $baseColor;
  background-color: $accentColorDarker;
  border: 2px solid darken($accentColorDarker, 7.5%);
}

my-btn:hoverを定義し、disabledなときのスタイルでそれを上書きするという方法でもやれるけど、 スタイルの上書きはやらない方が良いので上記の書き方にしました。

参考:

coliss.com