My CSS style is affecting other tags which I don't want

Question

i have one div class card which has a footer:

<div className='card'>
    <img src={thumb2} />
    <footer>
        <p>Beautifull and cozy house for you and familly</p>
        <span>$: 1200,00/month</span>
    </footer>
</div>

and this footer of the div class card has the style:

.card footer {
    background-color: #D6E4E3;
    display: flex;
    flex-direction: column;
    align-items: center;   
    margin: 0;
    padding: 0;
}

When I use the same tag footer for the bottom of my page the style of this new tag affects the style of my tag footer who is inside of my div card. What can I do for that not to happen? How can I use a lot of tags footer and the style of each other do not overwrite?

footer {
    height: 5%;
    display: flex;
    justify-content: center;
    background-image: linear-gradient(#5665e7, #7083E5);
}

Answer 1

By using classes you now avoided that the styling of the bottom-page footer will affect the card-footer.

.card--footer {
  background-color: #D6E4E3;
  display: flex;
  flex-direction: column;
  align-items: center;   
  margin: 0;
  padding: 0;
}

.page--footer {
  height: 5%;
  display: flex;
  justify-content: center;
  background-image: linear-gradient(#5665e7, #7083E5);
}

<div className='card'>
  <img src={thumb2} />
  <footer class="card--foter">
    <p>Beautifull and cozy house for you and familly</p>
    <span>$: 1200,00/month</span>
  </footer>
</div>

<footer class="page--footer"></footer>

You also got easy reusable styling using this approach.