Using a Class within another CSS Class

Question

I have a table, and I want the lines to intersperse colors the way below works perfectly

<style type="text/css">
    .tabela_parametros_gerais tr{height: 20px !important;}
    .tabela_parametros_gerais tr td{padding-left : 5px;}
    .tabela_parametros_gerais tr:hover {background-color: #E4E1C9 !important;}
    .tabela_parametros_gerais tr:nth-child(even) {background-color: #FFFFFF;}
    .tabela_parametros_gerais tr:nth-child(odd) {background-color: #ECFFEE;}   
</style>

the problem is that the colors established there, must come from another class list_cor_sim and list_cor_nao, I saw a way to do this using Less/Sass/Cs-modules but I can’t use them because the project I’m modifying does not use, and I can’t add - los

https://stackoverflow.com/questions/4564916/nesting-css-classes

example of how to "wish" it worked

<style type="text/css">
    .cor_hover{background-color: #E4E1C9;}
    .list_cor_sim{background-color: #ECFFEE;}
    .list_cor_nao{background-color: #FFFFFF;}
    .tabela_parametros_gerais tr{height: 20px !important;}
    .tabela_parametros_gerais tr td{padding-left : 5px;}
    .tabela_parametros_gerais tr:hover {.cor_hover() !important;}
    .tabela_parametros_gerais tr:nth-child(even) {.list_cor_nao();}
    .tabela_parametros_gerais tr:nth-child(odd) {.list_cor_sim();}   
</style>

with javascript, I am unable to add mouseouver and mouseout (addeventlistener is not working)

function zebrar() {
    var table = document.getElementById("tabela_parametros_gerais");
    for (var i = 0, row; row = table.rows[i]; i++) {

        var cor;
        if(i % 2 === 0){
            cor = "list_cor_sim";
        }else{
            cor = "list_cor_nao";
        }
        row.classList.add(cor);
    }
}

Answer 1

Browser and even less HTML won’t process this for you for security. the easiest way would be using a view-engine, if not a preprocessor. Apparently you cannot use them, to make this change then you must use javascript.

<script>
    document.querySelectorAll('.tabela_parametros_gerais tr:nth-child(even)')
        .forEach(el => el.classList.add('list-cor-nao'))
    document.querySelectorAll('.tabela_parametros_gerais tr:nth-child(odd)')
        .forEach(el => el.classList.add('list-cor-sim'))
</script>

Answer 2

I was able to solve it this way

function zebrar() {
    var table = document.getElementById("tabela_parametros_gerais");
    for (let i = 0, row; row = table.rows[i]; i++) {
        let cor = i % 2 === 0 ? 'list_cor_sim' : 'list_cor_nao';
        row.classList.add(cor);
        row.addEventListener("mouseover", function(){
            this.className = 'list_cor_hover';
        });
        row.addEventListener("mouseout", function(){
            this.className = cor;
        });
    }
}

Answer 3

I usually insert the classes in the server side page load.

in php would look like this:

$result = mysqli_query($CONN,$sql);
$linhas = myslqi_num_rows($result);
for($x=0;$x<$linhas;$x++){
   $campo = mysqli_result($result,$x,'campo');
   $class_linha = $x % 2?'linha_cor_sim':'linha_cor_nao';
   echo "<tr><td class=$class_linha>$campo</td></tr>";
}