:first-of-typeで特定のaタグにpointer-events: none;を

Question

####目標
最初の画像（アイキャッチ画像）のリンクをCSSにて無効化する。
####大まかなHTML構成

<div class="post-body">
 <div class="top-meta"></div>
 ↓アイキャッチ画像
 <div class="separator">
  <a> <img> </a>
 </div>
 ↑アイキャッチ画像
 <div class="separator">
  <a> <img> </a>
 </div>
</div>

####使用してみたCSS

.post-body a:first-of-type {
 pointer-events: none;
}

.post-body >div:first-of-type(2) a{
 pointer-events: none;
}

####要望

• CSSのみで完結させたい
• テンプレ（HTML）をいじりたくない
• JavaScript等を使いたくない

解決方法がわかる方は教えてください

Answer 1

.post-body > div:nth-of-type(2) a{
    pointer-events: none;
}

【:nth-of-type()疑似クラス (E:nth-of-type(n))｜セレクタ｜CSS HappyLife ZERO】
http://zero.css-happylife.com/selectors/nth-of-type.shtml

Comments

[2001Y]

素早いコメントありがとうございます。うまくいきました。
実は「>」を使ったのが初めてなのですが両側にスペースが必要なんですね！
勉強になりました！

[kei344]

> 両側にスペースが必要なんですね！
不要です。整形時の癖としてそうしているだけなので、そこが問題ではありません。
.post-body>div:nth-of-type(2) a{} でも問題ありません。

[gin]

「:first-of-type(2)」とfirstでやってたから効かなかったんですな

[kei344]

To: ginさん
補足ありがとうございます！

[2001Y]

あ、ほんとですね。そういうことだったんですね笑
first-of-typeやらfirst-childやらを試していくうちにごちゃごちゃになっていたようです。
お二人ともありがとうございました。