How to make nth-child stop affecting all elements

Question

I'm trying to make a nth-child to toggle the background color for every new element I add but, the background-color targets all my elements.

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
* {
  margin: 0;
  padding: 0;
  font-family: lato;
}

a {
  text-decoration: none;
}

.wrapper {
  display: flex;
  flex-direction: row;
}

.boxing {
  margin: 0 40px;
  position: relative;
  width: 400px;
  height: 580px;
  color: #333333;
  background-color: #ffffff;
}

.boxing img {
  width: 400px;
  height: 350px;
}

.box-text-area {
  width: 360px;
  height: 230px;
  padding: 0 0 0 40px;
  position: relative;
}

.boxing:nth-child(1) .box-text-area {
  background-color: #EDE0D2;
}

.box-text-area h4 {
  padding-top: 10px;
  font-size: 40px;
}

.box-text-area p {
  position: absolute;
  padding-top: 20px;
  left: 27%;
}

.appearing-asset {
  position: absolute;
  opacity: 0;
  background-color: rgba(0, 0, 0, .8);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 360px;
  color: #ffffff;
  height: 350px;
  bottom: 0;
  padding: 0 20px;
  transition-duration: .4s;
  pointer-events: none;
}

.open-asset:hover .appearing-asset {
  opacity: 1
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class="wrapper">
    <a href="#">
      <div class="boxing">
        <div class="box-text-area">
          <h4>8 Kitchen layout mistakes you don’t want to make</h4>
          <p>September 1, 2019</p>
        </div>
        <div class="open-asset">
          <img class="boxing-image" src="https://images.pexels.com/photos/584399/living-room-couch-interior-room-584399.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
          <div class="appearing-asset">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, reiciendis.</p>
          </div>
        </div>
      </div>
    </a>
    <a href="#">
      <div class="boxing">
        <div class="box-text-area">
          <h4>8 Kitchen layout mistakes you don’t want to make</h4>
          <p>September 1, 2019</p>
        </div>
        <div class="open-asset">
          <img class="boxing-image" src="https://images.pexels.com/photos/584399/living-room-couch-interior-room-584399.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
          <div class="appearing-asset">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, reiciendis.</p>
          </div>
        </div>
      </div>
    </a>
  </div>
</body>

</html>

Check this https://stackoverflow.com/questions/41867097/why-is-nth-child-selector-not-working — Jay Surya, Oct 05 '19 at 05:21

Prakash Rajotiya · Accepted Answer · 2019-10-05T05:28:45.433

hope this may help you.

Please try below css.

.wrapper a:nth-child(1) .box-text-area {
  background:EDE0D2;
}

The :nth-child() pseudo-class counts elements among all of their siblings under the same parent. It does not count only the siblings that match the rest of the selector. Similarly, the :nth-of-type() pseudo-class counts siblings sharing the same element type, which refers to the tag name in HTML, and not the rest of the selector

for more info -Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?

UPDATE

codepen - https://codepen.io/prakashrajotiya/pen/ZEEEWNV?editors=1100

How to make nth-child stop affecting all elements

1 Answers1