CSSでクラス指定の無いタグ”のみ”にスタイリングする（:notの使い方）

HTML/CSSでサイトを構築しているとよくあるのがCSS上書き問題。

例えば、以下のようなHTMLとCSSを実装する場合。

<a href="#url">テキストリンク</a>
<a href="#url" class="c-button">ボタンリンク</a>

a {
  color: #006cd8;
  text-decoration: none;
}
a:hover {
  color: #2f90f4;
  text-decoration: underline;
}
.c-button {
  /* 省略 */
}

割と一般的な書き方っぽいですが、c-buttonの実装をする際に最初に設定したaタグのカラーやtext-decorationの設定を上書きしないといけないのが地味に面倒です。

こんな感じで…▼

.c-button {
  color: #fff;
  background-color: #333;
  border: solid 2px #333;
  border-radius: 8px;
  padding: 8px 24px;
}
.c-button:hover {
  background-color: #888;
  border-color: #888;

  /* 以下２点の上書きが必要…。 */
  color: #fff; 
  text-decoration: none;
}

かといって、すべてのaタグにクラス名をつけてテキストリンクやボタンリンクごとにCSSを当てるのも面倒…。

そこで便利なのが:notという擬似クラスです。

:notは頻繁に使うことがないと思うので簡単に紹介すると、以下のような指定方法でfooというクラス指定をしていないdivタグに適用することができるという疑似クラスです。

div:not(.foo){
}

この:notは、:not([class])でクラス指定がないタグすべてを指定してスタイリングすることができます。

なので、以下のようにCSSをスタイリングすれば、ボタンリンクのスタイリングでわざわざ上書きをする必要がなくなります。

/* クラス付与していないaタグのみ適用 */
a:not([class]) {
  color: #006cd8;
  text-decoration: none;
}
a:not([class]):hover {
  color: #2f90f4;
  text-decoration: underline;
}

/* .c-button */
.c-button {
    color: #fff;
    background-color: #333;
    border: solid 2px #333;
    border-radius: 8px;
    padding: 8px 24px;
}
.c-button:hover {
    background-color: #888;
    border-color: #888;
    /* ──────────────────────────────
    クラスがあるので以下の指定は不要
    color: #fff; 
    text-decoration: none;
    ────────────────────────────── */
}

いまいち:notの使い道ってあまりないよなーと思っていたんですが、aタグみたいな基本のCSSから上書きするのに結構便利だなーと思いました。

皆さんの参考になれば幸いです。
それでは。👋