Est-il possible de référencer une règle CSS dans une autre?

Par exemple si j'ai le HTML suivant:

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

et ce 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 ***/

}

Comme comment dans les langages de script, vous avez des fonctions génériques qui sont souvent utilisées écrites en haut du script et chaque fois que vous devez utiliser cette fonction, vous appelez simplement la fonction au lieu de répéter tout le code à chaque fois.

Non, vous ne pouvez pas référencer un ensemble de règles à partir d'un autre.

Vous pouvez, cependant, réutiliser les sélecteurs sur plusieurs ensembles de règles dans une feuille de style et utiliser plusieurs sélecteurs sur un seul ensemble de règles (en les séparant par une virgule ).

.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;    
}

Vous pouvez également appliquer plusieurs classes à un seul élément HTML (l'attribut class prend une liste séparée par des espaces).

<div class="opacity radius">

Chacune de ces approches devrait résoudre votre problème.

Cela aiderait probablement si vous utilisiez des noms de classe qui décrivent pourquoi un élément doit être stylé au lieu de la manière dont il doit être stylé. Laissez le comment dans la feuille de style.

Vous ne pouvez pas à moins d'utiliser une sorte de CSS étendu tel que SASS . Cependant, il est très raisonnable d'appliquer ces deux classes supplémentaires à .someDiv.

Si .someDivest unique, je choisirais également de lui donner un identifiant et de le référencer en css en utilisant l'identifiant.

Si vous êtes prêt et capable d'utiliser une petite jquery, vous pouvez simplement le faire:

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

Si vous avez un javascript qui traite déjà la page ou vous pouvez le mettre quelque part dans les balises <script> Si tel est le cas, enveloppez ce qui précède dans la fonction Document prêt:

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

Je suis récemment tombé sur cela lors de la mise à jour d'un plugin wordpress. Le them a été changé, ce qui utilisait beaucoup de directives "! Importantes" dans le css. J'ai dû utiliser jquery pour forcer mes styles à cause de la décision géniale de déclarer! Important sur plusieurs balises.

Vous pouvez facilement le faire avec le pré-processeur SASS en utilisant @extend.

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

Sinon, vous pouvez également utiliser JavaScript (jQuery):

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

Le plus simple est bien sûr d'ajouter plusieurs classes directement dans le HTML

<div class="opacity radius">

Ajoutez simplement les classes à votre html

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

J'ai eu ce problème hier. La réponse de @ Quentin est ok:

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

mais j'ai créé une fonction javascript pour simuler l'héritage en css (comme .Net):

    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;
}

et css équivalent:

.test {
    background-color: yellow;
}

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

et HTML équivalent:

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

Je l'ai testé et travaillé pour moi, même si les règles sont dans différents fichiers css.

Mise à jour: j'ai trouvé un bogue dans l'héritage hiérarchique dans cette solution, et je résous le bogue très bientôt.

Vous pouvez utiliser la fonction var () .

La fonction CSS var () peut être utilisée pour insérer la valeur d'une propriété personnalisée (parfois appelée "variable CSS") au lieu de n'importe quelle partie d'une valeur d'une autre propriété.

Exemple:

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

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

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