css - 疑似クラス構文をスタックしますか？

Question

私は約1時間ウェブを検索してきましたが、「一般的な」チュートリアルしか見つけられないようです。

私は次のようなCSSコードを持っている場合があります

.foo {
   border-color: #ff000;
}

.foo:hover {
   border-color: #0000ff;
}

1つのクラスのような要素にすることはできますか？以下はアイデアのデモンストレーションですが、それが可能かどうかはわかりません。

.foo {
   border-color: #ff0000;
   border-color-hover: #0000ff;
}

score 3 · Accepted Answer

:hoverいいえ、それはできません。最初の例のように、クラスに分ける必要があります。

score 1 · Accepted Answer

あなたが達成しようとしていることのために、あなたはバニラCSSを使用しないでしょう。SASS/SCSSまたはLESSを調べることができます。

LESSを使用すると、次のことが可能になります。

foo { 
    border-color: #ff0000;
    &:hover { border-color: #0000ff; }
}

score 0 · Accepted Answer

いいえ、できません。そして、なぜそれが必要なのですか？最初の例は正常に機能します。

3 に答える 3