擬似クラス+擬似要素
状態:-
閲覧数:10,845
投稿日:2013-04-19
更新日:2015-09-16
実際に遭遇した例 … リンク要素の後に内容を追加した後、マウスオーバーしたい
3つ重ねる
リンク要素の後に内容を追加した後、マウスオーバーしたい
・実際に遭遇したのは、見出しCSSを試行錯誤したとき
・いいなと思った見出しCSSは、大体「擬似クラスと擬似要素のコンボ技」を決めていた
CSS的には?
・リンク要素 … aタグ
・要素の後に内容追加 … :after
・マウスオーバー … :hover
何が問題なの?
プチパニック
・「要素」が2つ以上続くと、途端にどれを先に書けば良いか分からなくなる。もう分からない。全然分からないー
そんな時は構文を思い出す
・何が「要素名」で、何が「擬似クラス名」で、何が「擬似要素名」なのかを把握
カテゴライズ
・リンク要素 … aタグ … 要素名
・要素の後に内容追加 … :after … 擬似要素
・マウスオーバー … :hover … 擬似クラス
後は順番通り並べるだけ
要素名:擬似クラス:擬似要素
a:hover:before振り返り
「a:before:hover」ではなく「a:hover:before」
・絶対「a:before:hover」だろうと思い、30分近くも粘るも一向に動作しなかった
・そもそも「擬似クラス」と「擬似要素」に分かれていること自体知らなかった
・「この件、あまり情報がない」とか書いたけど、今考えると結構恥ずかしい
・間違える人なんかいないのかもしれないが…
「td:before:nth-child(2n)」ではなく「td:nth-child(2n):before」
コメントありがとうございました。
1さん
コメントありがとうございました。
>擬似要素と擬似クラスを混同してませんか?
・混同していました
・両者が異なるカテゴリーに属すること自体、今、初めて、知りました
・履歴が分かるように追記しようかと思ったのですが、訂正しようがないぐらい内容が相違していたので、全面的に書き直しました
・現時点の閲覧数:1940
・これまで閲覧していただいた1939人の方へ。間違った内容でした。ごめんなさいー
×
ゲストコメント一覧
番号 | 内容 | 投稿日 |
---|---|---|
1 | 擬似要素と擬似クラスを混同してませんか? | 2014-03-21 |
2 | 悩んでいたことがタイトルで解決!!あざっすw | 2015-01-05 |
3 | 助かりました。ありがとうございました。 | 2015-06-17 |
コメント件数 … 3件 |