I'm trying to position an image with the class photo, but unfortunately, the nth-child selector is not having any effect on that particular element. I have searched for various solutions, but none seem to be working!
.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>Does anyone know why the nth-child selector isn't working on the photo class? Any suggestions on how to fix this?