 |
[CSS] 擬似クラス・擬似要素
2015.09.15記
|
|
今回は、CSSでの「:hover」などの擬似クラス、「:after」などの擬似要素をちょっとだけ取り扱ってみたいと思います。
擬似クラス、擬似要素って何？ 個人的には、クラスで指定する代わりに、クラスのように振る舞うものが「擬似クラス」で、要素を追加する代わりに、要素を追加したように振る舞うものが「擬似要素」と捉えています。 参考： http://www.marguerite.jp/Nihongo/WWW/RefCSS/Selectors/Pseudo/index.html https://w3g.jp/css/guide/pseudo |
:hover
要素の上にマウスカーソルを合わせた状態を表す擬似クラス以下はサンプルとHTMLとCSS
HTML, CSS
<div id="sample">
<a href="https://www.google.co.jp/">Google</a>
<a href="http://www.keibunsya.co.jp/">啓文社</a>
</div>
<style type="text/css">
#sample a { display: block; }
#sample a:hover { background: red; }
</style>
:after, ::after
要素の後ろに要素を追加する擬似要素CSS3では擬似要素は「::after」のようにコロン2つで指定するそうです
HTML, CSS
<div id="sample">
<a href="https://www.google.co.jp/">Google</a>
<a href="http://www.keibunsya.co.jp/" class="new">啓文社</a>
</div>
<style type="text/css">
#sample .new:after {
content: "\65B0\7740";// 「新着」文字化けを避けるためunicode化
border: 1px solid hotpink;
}
</style>
| いろいろあるので、またちょっとずつ見ていきたいと思います |
 2015.10.15 スマホサイト(5) |
 2015年 |
 2015.08.15 スマホサイト(4) |
ホーム