I'm attempting to apply a radius property to the first, third, and fifth image or div element. I've tried using :first-child and .image img:nth-of-type(1), but both options are applying the radius to every five elements. Can anyone explain why this is happening?
.image img:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
<div className="container">
<div className="gallery-container w-2 h-2">
<div className="gallery-item">
<div className="image">
<img src={this.props.photos.room_photos[0].imageUrl} />
</div>
</div>
</div>
<div className="gallery-container">
<div className="gallery-item">
<div className="image">
<img src={this.props.photos.room_photos[1].imageUrl} />
</div>
</div>
</div>
<div className="gallery-container">
<div className="gallery-item">
<div className="image">
<img src={this.props.photos.room_photos[2].imageUrl} />
</div>
</div>
</div>
<div className="gallery-container">
<div className="gallery-item">
<div className="image">
<img src={this.props.photos.room_photos[3].imageUrl} />
</div>
</div>
</div>
<div className="gallery-container">
<div className="gallery-item">
<div className="image">
<img src={this.props.photos.room_photos[4].imageUrl} />
</div>
</div>
</div>
</div>