Is it possible to leave each category link a color in wordpress?

Question

Hi! I am trying to color the background of the link of each category, leaving each one of a color, but I wanted you to style ONLY the links of the categories on the homepage, I do not want to change the style on the page of the categories. It’s something I’m trying to do:

I was wondering if you could do that and if you could help me. That’s my code so far:

<div class="col-md-4">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class="artigo">
<div class="post-header"><?php the_post_thumbnail( 'large'); ?></div> 

<div class="icons-categ"><?php the_category('') ?></div>
</div>



<?php endwhile?>    <?php else: ?>    <?php endif; ?>   

</div>

This is the code of the categories I have in css, but it doesn’t seem to work:

.category-noticias .icons-categ {
    background: #e07737;
    color:#fff;
}

.category-celebridades .icons-categ {
    background: #1865e4;
    color:#fff;
}

.category-musicas .icons-categ {
    background: #aa0909;
    color:#fff;
}

.category-filmes .icons-categ {
    background: #b6e037;
    color:#fff;
}

Note: I am using wordpress and bootstrap

Answer 1

Invert the reference order of the classes:

.icons-categ .category-noticias {
    background: #e07737;
    color:#fff;
}

.icons-categ .category-celebridades {
    background: #1865e4;
    color:#fff;
}

.icons-categ .category-musicas {
    background: #aa0909;
    color:#fff;
}

.icons-categ .category-filmes {
    background: #b6e037;
    color:#fff;
}