frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

擬似要素:hoverはないがhover:擬似要素はある

スポンサードリンク


スポンサードリンク


::beforeの:hoverはないが:hoverの::beforeはあります。
同じように::afterの:hoverはないが:hoverの::afterはあります。

下記に例を示します。

リンクにマウスオーバーした際、カラーを変更するデザインがあったとします。
それはa:hoverで色を変えればよいですが、矢印アイコンも変えなければいけないとき、擬似要素であるアイコンにhover効果を充てます。

:hover+::after

See the Pen evaXLg by funclur (@funclur) on CodePen.


a {
	color: blue;
	position: relative;
}
a::hover {
	color: red;
}
a::after {
    position: absolute;
    top: 5px;
    right: -10px;
    left: auto;
    display: block;
    width: 4px;
    height: 4px;
    border-top: 2px solid blue;
    border-right: 2px solid blue;
    content: "";
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);

}
a:hover::after {
    border-top: 2px solid red;
    border-right: 2px solid red;
}

:first-child+::before

これはやったことありませんでしたが実験的にやってみたらやはりできるようです。
最初の要素の擬似要素を指定します。

See the Pen aJrMaL by funclur (@funclur) on CodePen.


ul li {
	margin-top: 5px;
	position: relative;
	padding-left: 21px;
	list-style-type: none;
}
ul li::before {
	position: absolute;
	top: 7px;
	content: "";
	background: #000;
	border-radius: 50%;
	width: 3px;
	height: 3px;
	left: 7px;
}
ul li:first-child::before {
	background: red;
}

擬似クラスと擬似要素の違い

他人様のサイトからお借りします。
https://wp.yat-net.com/?p=4505

擬似クラス
:link
:visited
:active
:hover
:focus
:lang
:target
:root
:nth-child
:nth-last-child
:nth-of-type
:nth-last-of-type
:first-child
:last-child
:first-of-type
:last-of-type
:only-child
:only-of-type
:empty
:not
:enabled
:checked
擬似要素
::before
::after
::first-letter
::first-line
::selection

:hover::after::after:hoverで結構迷うことが多かったのですが、
こうしてみるとcss記述順序としては、
要素+擬似クラス+擬似要素と覚えると良さそうです。
コロンのつく数が増えていくと覚えてもいいですね笑