why can't i overwrite style of a div?

September 4, 2023

in my code i have a container with display flex,and i trageted the divs inside the container and did some styling on them.but when i try to overwrite theose styles for a specific div,it doesen’t work.how can i fix this?

main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  width: 75%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 50px;
}

.container div {
  width: 300px;
  height: 300px;
  background-color: #aaddaa;
  border-radius: 1rem;
}

.lanscape {
  width: 300px;
  height: 300px;
}

<main>
  <div class="container">
    <div class="img lanscape -L1">-L1</div>
    <div class="img lanscape -L2">-L2</div>
    <div class="img lanscape -L3">-L3</div>
    <div class="img portrait -P1"></div>
    <div class="img portrait -P2"></div>
    <div class="video landscape VL-1"></div>
    <div class="video portrait VP-1"></div>
    <div class="video portrait VP-2"></div>
    <div class="text T-1"></div>
    <div class="text T-2"></div>
    <div class="text T-3"></div>

  </div>

</main>

>Solution :

You need to write more specific styles, such as .container div.lanscape instead of .landscape since that is not more specific than .container div

main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  width: 75%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 50px;
}

.container div {
  width: 300px;
  height: 300px;
  background-color: #aaddaa;
  border-radius: 1rem;
}

.container div.lanscape {
  background-color: red;
}

<div class="container">
  <div class="img lanscape -L1">-L1</div>
  <div class="img lanscape -L2">-L2</div>
  <div class="img lanscape -L3">-L3</div>
  <div class="img portrait -P1"></div>
  <div class="img portrait -P2"></div>
  <div class="video landscape VL-1"></div>
  <div class="video portrait VP-1"></div>
  <div class="video portrait VP-2"></div>
  <div class="text T-1"></div>
  <div class="text T-2"></div>
  <div class="text T-3"></div>

</div>