css - わかりやすくするために CSS セレクターをグループ化する方法はありますか?

Question

:hoverダースの CSS セレクターがあり、それらすべてにプロパティを割り当てたい場合、私はこれを行うことに慣れています。

selector, selector2, someOtherSelector, someSelector div {
    //some properties
}
selector:hover, selector2:hover, someOtherSelector:hover, someSelector div:hover {
    //some properties
}

4 回入力する:hoverのは冗長に思えます。セレクターを次のようにグループ化する方法はありますか

(selector, selector2, someOtherSelector, someSelector div):hover {
     //some properties
}

代わりは？

Answer 1

CSS ではネイティブではありません。SCSSなどを使用すると、次のように記述できます。

selector, selector2, someOtherSelector, someSelector div {
  // some properties

  &:hover {
    // some more properties
  }
}

Answer 2

それらがすべて同じホバー プロパティを共有している場合、:hover を定義するすべてに共有されるクラスを作成できます。

したがって、次のようになります。

allSelectors, selector, selector2, someOtherSelector, someSelector div {
    //some properties
}
allSelectors:hover {
    //some properties
}

再利用可能なクラスにより、コードがよりクリーンで少なくなります。

Answer 3

残念ながら、残念ながら、あなたがやろうとしていることを簡単に行う方法はありません。スタイルをjQueryなどに移動したい場合を除きます（ただし、これは適切なソリューションではありません）。