【CSS】疑似クラス(nth-of-type)がうまく効かない

Question

やりたいこと
3番目の画像はmargin-bottomを0pxにしたい

シンプルなんですが、.snsNavの中のimgにはmargin-bottomが指定されています。
その上で、３番目の画像はマージンを打ち消したいと思います。

ためしたこと
・nth-ot-type(3)をlast-of-typeに指定したが、１番目も２番目もマージンがなくなってしまった
・nth-ot-type(3)をnth-child(3)に変更してみた
・margin-bottom:15pxなので、margin-bottom:0pxとこちらもpx形式に合わせた

等色々検証してみましたが、以前変化がありません。
根本的に疑似クラスの理解を間違っているかのせいがありますが、お力添えいただきたいです。
よろしくお願い申し上げます。

HTML

	<div class="snsNav">
		<a href="">
			<img src="img/facebook.png" alt="facebook">
		</a>

		<a href="">
			<img src="img/instagram.png" alt="">
		</a>
		
		<a href="">
			<img src="img/twitter.png" alt="">
		</a>
	</div>
コード

/* SNSボタン */
.snsNav{
  position: fixed;
  top: 80%;
  right: 5%;
  display: flex;
  flex-direction: column;
  z-index: 100;
}
.snsNav a img{
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  margin-bottom: 24px;
}
.snsNav a img:nth-of-type(3){
  margin-bottom: 24px;
}
/* //SNSボタン */
コード

Answer 1

nth-of-type() は兄弟要素のなかでの順番です。img は a の中に一つしかないので兄弟はいません。
3番目のa要素の中のimgと考えましょう。

.snsNav a:nth-of-type(3) img{
  margin-bottom: 0;
}

下記でもいいですね。

.snsNav a:last-of-type img{
  margin-bottom: 0;
}

Comments

[退会済みユーザー]

hatena19様

ありがとうございます。とてもわかりやすいです。

Answer 2

根本的に疑似クラスの理解を間違っているかのせいがありますが

はい、nth-of-typeは親要素を基準に数えます。どの<img>も<a>の中に1つだけなので、すべて1番目であり最後です。

.snsNav a:nth-of-type(3) imgと、<a>の数を数えればいいのではないでしょうか。

Comments

[退会済みユーザー]

非常にわかりやすくありがとうございました。やはり解釈を間違っていましたね。
ありがとうございました。