Unityアセットストアセール中!

【CSS】hoverとnth-childを両方指定したいときの書き方

<景品表示法に基づく表記 > 本サイトのコンテンツには、商品プロモーションが含まれている場合があります。
スポンサードリンク

:から始まる擬似クラスを複数つけたいときの記述方法

目次

記述順序を間違えると動作しない

記述の順番が決まっているため順番間違えには注意。

nth-childで指定した要素にhoverの擬似クラス要素を指定するときはhoverを先に書きます。

/* hoverが動く */
#page__news .service__cat__box > div:hover:nth-child(1) {
  transform: translateY(-10px);
  transition: 0.35s;
}

/* hoverが動作しない */
#page__news .service__cat__box > div:nth-child(1):hover {
  transform: translateY(-10px);
  transition: 0.35s;
}
スポンサードリンク
[WordPressのライティング向けプラグイン]
ワードプレスオリジナルプラグイン >>

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

スポンサーリンク

コメント

コメントする

目次
閉じる