É possível fazer referência a uma regra CSS dentro de outra?

Por exemplo, se eu tiver o seguinte HTML:

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

e este 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 ***/

}

Como em linguagens de script, você tem funções genéricas que são usadas frequentemente escritas no topo do script e toda vez que você precisa usar essa função, você simplesmente chama a função em vez de repetir todo o código todas as vezes.

Não, você não pode fazer referência a um conjunto de regras de outro.

Você pode, no entanto, reutilizar seletores em vários conjuntos de regras em uma folha de estilo e usar vários seletores em um único conjunto de regras ( separando-os com uma vírgula ).

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

Você também pode aplicar várias classes a um único elemento HTML (o atributo de classe leva uma lista separada por espaços).

<div class="opacity radius">

Qualquer uma dessas abordagens deve resolver seu problema.

Provavelmente ajudaria se você usasse nomes de classes que descrevessem por que um elemento deve ser estilizado em vez de como deveria ser estilizado. Deixe o como na folha de estilo.

Você não pode, a menos que esteja usando algum tipo de CSS estendido, como o SASS . No entanto, é muito razoável aplicar essas duas classes extras a .someDiv.

Se .someDivfor exclusivo, eu também escolheria dar a ele um id e fazer referência a ele em css usando o id.

Se você deseja e é capaz de empregar um pouco de jquery, pode simplesmente fazer o seguinte:

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

Se você tiver um javascript que já processa a página ou você pode colocá-lo em algum lugar entre as tags <script>. Em caso afirmativo, envolva o acima na função de documento pronto:

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

Recentemente me deparei com isso ao atualizar um plugin do wordpress. O them foi alterado, o que usava muitas diretivas "! Important" em todo o css. Tive que usar jquery para forçar meus estilos por causa da decisão genial de declarar! Important em várias marcas.

Você pode fazer isso facilmente com o pré-processador SASS usando @extend.

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

Caso contrário, você também pode usar JavaScript (jQuery):

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

O mais fácil é, claro, adicionar várias classes diretamente no HTML

<div class="opacity radius">

Basta adicionar as classes ao seu html

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

Eu tive esse problema ontem. A resposta de @Quentin está ok:

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

mas criei uma função javascript para simular herança em css (como .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;
}

e css equivalente:

.test {
    background-color: yellow;
}

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

e HTML equivalente:

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

Eu testei e funcionou para mim, mesmo que as regras estejam em arquivos css diferentes.

Atualização: encontrei um bug na herança hierárquica nesta solução e estou resolvendo o bug muito em breve.

Você pode usar a função var () .

A função CSS var () pode ser usada para inserir o valor de uma propriedade personalizada (às vezes chamada de "variável CSS") em vez de qualquer parte de um valor de outra propriedade.

Exemplo:

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

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

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