:から始まる擬似クラスを複数つけたいときの記述方法
目次
記述順序を間違えると動作しない
記述の順番が決まっているため順番間違えには注意。
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;
}
コメント