CSSルールを別のCSSルール内で参照することは可能ですか？

たとえば、次のHTMLがあるとします。

<div class="someDiv"></div>

そしてこのCSS：

.opacity {
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6; 
}
.radius {
    border-top-left-radius: 15px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;    
}

.someDiv {
    background: #000; height: 50px; width: 200px;

/*** How can I reference the opacity and radius classes here
     so this div has those generic rules applied to it as well ***/

}

スクリプト言語では、スクリプトの上部に記述されることが多い汎用関数があり、その関数を使用する必要があるたびに、すべてのコードを毎回繰り返すのではなく、単にその関数を呼び出すだけです。

いいえ、あるルールセットを別のルールセットから参照することはできません。

ただし、スタイルシート内の複数のルールセットでセレクターを再利用し、単一のルールセットで複数のセレクターを使用することができます（コンマで区切ります）。

.opacity, .someDiv {
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6; 
}
.radius, .someDiv {
    border-top-left-radius: 15px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;    
}

また、単一のHTML要素に複数のクラスを適用することもできます（class属性はスペースで区切られたリストを取ります）。

<div class="opacity radius">

これらのアプローチのいずれかが問題を解決するはずです。

要素をスタイルする方法ではなく、なぜスタイルする必要があるかを説明するクラス名を使用した場合に役立つでしょう。方法をスタイルシートに残します。

SASSなどのある種の拡張CSSを使用していない限り、これはできません。ただし、これら2つの追加クラスをに適用することは非常に合理的.someDivです。

.someDiv一意である場合は、IDを指定し、CSSでIDを使用して参照することも選択します。

少しのjqueryを使用する意思がある場合は、次のように簡単に実行できます。

$('.someDiv').css([".radius", ".opacity"]);

ページをすでに処理しているJavaScriptがある場合、または<script>タグのどこかにそれを含めることができます。その場合は、上記をdocument ready関数でラップします。

$(document).ready( function() {
  $('.someDiv').css([".radius", ".opacity"]);
}

私は最近、ワードプレスのプラグインを更新しているときにこれに遭遇しました。それらは、CSS全体で多くの「！important」ディレクティブを使用するように変更されました。いくつかのタグで！importantを宣言するという天才的な決定のため、スタイルを強制するためにjqueryを使用する必要がありました。

@extendを使用すると、SASSプリプロセッサで簡単にこれを行うことができます。

someDiv {
    @extend .opacity;
    @extend .radius;
}

そうでなければ、JavaScript（jQuery）も使用できます。

$('someDiv').addClass('opacity radius')

もちろん、HTMLに複数のクラスを追加するのが最も簡単です。

<div class="opacity radius">

クラスをHTMLに追加するだけです

<div class="someDiv radius opacity"></div>

昨日この問題がありました。@クエンティンの答えは大丈夫です：

No, you cannot reference one rule-set from another.

しかし、CSS（.Netなど）で継承をシミュレートするJavaScript関数を作成しました。

    var inherit_array;
    var inherit;
    inherit_array = [];
    Array.from(document.styleSheets).forEach(function (styleSheet_i, index) {
        Array.from(styleSheet_i.cssRules).forEach(function (cssRule_i, index) {
            if (cssRule_i.style != null) {
                inherit = cssRule_i.style.getPropertyValue("--inherits").trim();
            } else {
                inherit = "";
            }
            if (inherit != "") {
                inherit_array.push({ selector: cssRule_i.selectorText, inherit: inherit });
            }
        });
    });
    Array.from(document.styleSheets).forEach(function (styleSheet_i, index) {
        Array.from(styleSheet_i.cssRules).forEach(function (cssRule_i, index) {
            if (cssRule_i.selectorText != null) {
                inherit_array.forEach(function (inherit_i, index) {
                    if (cssRule_i.selectorText.split(", ").includesMember(inherit_i.inherit.split(", ")) == true) {
                        cssRule_i.selectorText = cssRule_i.selectorText + ", " + inherit_i.selector;
                    }
                });
            }
        });
    });

Array.prototype.includesMember = function (arr2) {
    var arr1;
    var includes;
    arr1 = this;
    includes = false;
    arr1.forEach(function (arr1_i, index) {
        if (arr2.includes(arr1_i) == true) {
            includes = true;
        }
    });
    return includes;
}

および同等のCSS：

.test {
    background-color: yellow;
}

.productBox, .imageBox {
    --inherits: .test;
    display: inline-block;
}

および同等のHTML：

<div class="imageBox"></div>

ルールが異なるcssファイルにある場合でも、テストして機能しました。

更新：このソリューションの階層継承にバグが見つかり、すぐにバグを解決しています。

var（）関数を使用できます。

var（）CSS関数を使用して、別のプロパティの値の一部ではなく、カスタムプロパティ（「CSS変数」と呼ばれることもあります）の値を挿入できます。

例：

:root {
  --main-bg-color: yellow;
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-bg-color: black;
  }
}

body {
  background-color: var(--main-bg-color);
}