CODEWITHSUNDEEP
csscss-selectors
undefined
undefined

Reputation: 1158

Why nth-child is not working as expected?

I wanna position image which has photo class. However, nth-child is not working on that element. I looked for many solutions, but it couldn't be solved!

.container {
  height: 100vh;
  position: relative;
}

.irene {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 60vw;
}

.irene-img {
  position: relative;
}

.irene-img::after {
  content: ' ';
  z-index: -1;
  position: absolute;
  left: 5%;
  top: 5%;
  width: 100%;
  height: 100%;
  border: 5px solid #2ebce2;
}

.irene-title {
  position: absolute;
  left: -10%;
  top: -10%;
  color: rgba(0, 0, 0, 0.4);
  font-size: 10rem;
}

.irene-title span {
  font-size: 5rem;
}

.single__detail__spec {
  position: absolute;
  font-size: 2rem;
  line-height: 2;
  top: 35%;
  right: 10%;
  color: rgba(0, 0, 0, 0.8);
}

.single__detail__spec span {
  font-weight: bold;
}

.single__detail__saying {
  position: absolute;
  width: 400px;
  font-size: 2rem;
  line-height: 2;
  bottom: 5%;
  right: 5%;
  color: rgba(0, 0, 0, 0.8);
}

.photo {
  position: absolute;
  width: 400px;
}

.photo:nth-child(1) {
  left: 0;
  top: 0;
}
<!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>
  <base href="https://raw.githack.com/baeharam/Redvelvet-Fansite/master/html/">
  <link rel="stylesheet" href="../css/default.css">
</head>
<body>
  <div class="container">
    <div class="irene">
      <div class="irene-img">
        <img src="../images/about-irene.jpg" alt="">
      </div>
      <p class="irene-title">IRENE <span>배주현</span></p>
    </div>
    <p class="single__detail__spec">
      <span>생일.</span> 1991.03.29<br/>
      <span>별명.</span> 배추, 현이, 엔딩요정<br/>
      <span>취미.</span> 다리미질, 빨래<br/>
      <span>혈액형.</span> A형
    </p>
    <p class="single__detail__saying">
      "lorem ipsum"
    </p>
  </div>
  <img class="photo" src="../images/photo-irene1.jpg" alt="">
</body>
</html>

Why nth-child of photo is not working? How to handle it?

Upvotes: 1

Views: 3370

Answers (2)

Marina M
Marina M

Reputation: 111

The question has been answered, but i would like to add something to it: .photo:nth-child(1) would normally be written as .photo:first-child.

As was said, in this case it doesn't work because the element with the class 'photo' is not the first child of it's parent. The selector .photo:first-child (which would be the correct choice anyway) as well as the selector .photo:nth-child(1) will look for the element with the class .photo which is the first child of it's parent. If there are not elements with that class, whilst also being first child of their parents, the style won't be applied.

If you wanted to select by type, as in, select the first element that comes up with that class, no matter it's position to it's parent, the selector .photo:nth-of-type(1) should be used.

If you wanted to select the element according to it's position to it's parent, it should be .photo:nth-child(2) since the element with the class .photo is the second in relation to it's parent.

Here is a guide towards :nth-child(n) which i found very explanatory. https://css-tricks.com/useful-nth-child-recipies/

Here is a guide for :nth-of-type https://css-tricks.com/almanac/selectors/n/nth-of-type/ which is also quick and easy to understand. I hope i helped!

Upvotes: 1

AvcS
AvcS

Reputation: 2323

I think you are getting confused between nth-child and nth-of-type

nth-child(n): Selects the matching element that comes after n-1 elements in the same parent, it doesn't care whether those elements match the same selector or not, it only cares about position.

nth-of-type(n): Selects the matching element that comes after n-1 elements that matches the same selector in the same parent.

There are 2 possible solutions for your problem

  1. img:nth-child(2)
  2. img:nth-of-type(1)

Upvotes: 2

Related Questions