How to apply different css styles to 2 elements with the same class name?

In my webpage, there are two different elements with same classes. E.g.

<div class="container">First Container</div>
<nav class="container">Second Container</nav>

Now, I want to add background-color:red to the first container and background-color:blue to the second container with the same class container.

To do that, we can target the tag name with the class name container. E.g.

<style>
 div.container{background-color:red}
 nav.container{background-color:blue}
</style>
<div class="container">First Container</div>
<nav class="container">Second Container</nav>