:nth-child(1)が2番目以降にも適用されてしまう

前提

HTMLとCSSで美容室のWebサイトを作っています。
Style写真を掲載する部分でスマホ版だと一部画像で人物が見切れてしまいます。

実現したいこと

見切れてしまう画像のみ、人物が見切れないようにobject-positionで画像の表示位置を調整したい。

発生している問題・エラーメッセージ

:nth-child()で調整したい画像のみ指定してobject-positionを適用させたかったのですが、
Style画像の全てに「:nth-child(1)」で指定しているobject-position:right; が適応されてしまいます。

該当のソースコード

【HTML】

Style

【CSS】

#style{
padding: 10rem 0 5rem;
background-color: $beige;
}
#style > h2{
padding-bottom: 5rem;
}
.style-container{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 600px;
margin: 0 auto;
}
.style-item{
width: 50%;
height: 18rem;
padding: 0 1rem 1rem;
}
.style-item:nth-child(2n) {
padding: 0 1rem 1rem 0;
}
.style-item img{
width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;
}
.style-item img:nth-child(1){
object-position: right;
}
.style-item img:nth-child(3){
object-position: left;
}

//PC用CSS
.style-container{
@media (min-width: 769px) {
width: 100%;
object-fit: cover;
display: flex;
flex-wrap: wrap;
padding: 5rem 10rem;
justify-content: space-between;
align-content: space-between;
max-width: 1100px;
margin: 0 auto;
}
}
.style-item{
@media (min-width: 769px) {
width: 30%;
height: initial;
margin-bottom: 4rem;
padding: initial;
}
}
.style-item:nth-child(2n) {
@media (min-width: 769px) {
padding: initial;
}
}

試したこと

補足情報(FW/ツールのバージョンなど)

コメントを投稿

0 コメント