トップ  >  2015年  >  2015.09.15 [CSS] 擬似クラス・擬似要素
features
[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)

PAGE TOP 
メニュー
サイト内検索
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
Copyright(C) 1999-2018 keibunsya all right reserved.