O @Chun está certo quando disse que sua "hierarquia" HTML não deveria ser implementada assim.
Todavia resolvendo o "problema", você pode incluir "prioridades" nos seus seletores, exemplo:
.tema-1 .btn, .tema-2 .tema-1 .btn{
background-color:#975167;
border-color:#774137;
}
.tema-2 .btn, .tema-1 .tema-2 .btn{
background-color:#36c1ab;
border-color:#26819b;
}
O seletor .tema-2 .tema-1 .btn
tem predominância sobre o .tema-2 .btn
, mesmo estando antes. Assim como o .tema-1 .tema-2 .btn
sobre o .tema-2 .btn
. Se você tiver 10 temas terá que fazer isso pra todos em cada regra:
.tema-1 .btn,
.tema-2 .tema-1 .btn,
.tema-3 .tema-1 .btn,
.tema-4 .tema-1 .btn,
.tema-5 .tema-1 .btn,
.tema-6 .tema-1 .btn,
.tema-7 .tema-1 .btn,
.tema-8 .tema-1 .btn,
.tema-9 .tema-1 .btn,
.tema-10 .tema-1 .btn,{
background-color:#975167;
border-color:#774137;
}
.tema-1 .controle,
.tema-2 .tema-1 .controle,
.tema-3 .tema-1 .controle,
.tema-4 .tema-1 .controle,
.tema-5 .tema-1 .controle,
.tema-6 .tema-1 .controle,
.tema-7 .tema-1 .controle,
.tema-8 .tema-1 .controle,
.tema-9 .tema-1 .controle,
.tema-10 .tema-1 .controle,{
/* Regras */
}
.tema-1 .alerta,
.tema-2 .tema-1 .alerta,
.tema-3 .tema-1 .alerta,
.tema-4 .tema-1 .alerta,
.tema-5 .tema-1 .alerta,
.tema-6 .tema-1 .alerta,
.tema-7 .tema-1 .alerta,
.tema-8 .tema-1 .alerta,
.tema-9 .tema-1 .alerta,
.tema-10 .tema-1 .alerta,{
background-color:#975167;
border-color:#774137;
}
Isso ficaria ruim de gerenciar, então você poderia usar um pre-processador, como LESS ou SASS. E fazer algo como:
.tema-1,
.tema-2 .tema-1,
.tema-3 .tema-1,
.tema-4 .tema-1,
.tema-5 .tema-1,
.tema-6 .tema-1,
.tema-7 .tema-1,
.tema-8 .tema-1,
.tema-9 .tema-1,
.tema-10 .tema-1{
.btn {
/* Regras */
}
.controle {
/* Regras */
}
.alerta {
/* Regras */
}
}
Exemplo funcional:
.box{
background-color:rgba(0,0,0,0.08);
padding:5px;
}
.box .box{margin: 10px 0 0 10px;}
.btn{
border: 1px solid #CF8A5B;
border-radius:2px;
background-color: #DFAA5B;
color:#333;
padding:3px;
margin:5px 0;
cursor:pointer;
}
.tema-1 .btn, .tema-2 .tema-1 .btn{
background-color:#975167;
border-color:#774137;
}
.tema-2 .btn, .tema-1 .tema-2 .btn{
background-color:#36c1ab;
border-color:#26819b;
}
<div class="box">
Padrão: <button class="btn">Botão</button>
<div class="box tema-2">
Tema 2:
<button class="btn">Botão</button>
<div class="box tema-1">
Tema 1:
<button class="btn">Botão</button>
<div class="box tema-2">
Tema 2:
<button class="btn">Botão</button>
</div>
</div>
</div>
</div>
tema-1
é suposto estar dentro dotema-2
no HTML? Não me parece correcto pela sua hierarquia...if/else
emPHP
ouJavascript
? Porque pelo que estou a perceber o queres fazer aqui é: se a opção dotema-1
estiver selecionada - correr o código HTML<div class='tema-1'></div>
ou se a opçãotema-2
estiver selecionada -<div class='tema-2'></div>
background
. Eu gostaria de conseguir aplicar os estilos aos elementos conforme o tema mais próximo definido. Tome como exemplo oRelativeLayout
e oLinearLayout
do android com uma estrutura do tipoLinearLayout > RelativeLayout > LinearLayout
.