liguofeng29’s blog

個人勉強用ブログだっす。

CSS3.0のセレクタ - 擬似クラス

E:link/E:visited : 未訪問 (:link) であるもの、訪問済 (:visited)

E:active : ユーザーによって実行されたE要素
E:hover : ユーザーがポインティングデバイスで示したE要素
E:focus : ユーザーによって実行されたE要素

E:enabled / E:disabled UI 要素である E のうち、有効 (:enabled) であるもの、無効 (:disabled) であるもの
**なお、表示非表示(display、visibility)は有効無効に影響を及ぼさない。

E:checked : UI 要素である E のうち、チェックされた (:checked) もの (チェックボックスラジオボタンなど)
E:default : UI 要素である E のうち、デフォルトチェックの要素

E:target : URI が参照した(ハッシュ指定されている)ターゲットになる E 要素

E:read-only : 読取のみUI
E:read-write : 読取&書込のみUI
**E::selection: 選択中UI

E:lang(C) : 言語情報 C を持つ E 要素

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> 擬似クラス </title>
   <style type="text/css">
        td {
            border:1px solid black;
            padding:4px;
        }
        /* マウスがをの合わせた */
        tr:hover {
            background-color: #aaa;
        }
        /* 実行 */
        input:active {
            background-color: blue;
        }
        /* フォーカス取得 */
        :focus {
            text-decoration: underline;
        }
        /* 有効 */
        :enabled{
            font-weight: bold;
            font-size:14pt;
        }
        /* 無効 */
        :disabled{
            font-size:14pt;
        }
        /* チェック */
        :checked {
            outline: red solid 5px;
        }
        /* デフォルト */
        :default {
            outline: #bbb solid 5px;
        }
    </style>
</head>
<body>
<table style="width:400px;border-collapse:collapse">
    <tr>
        <td>1行目だよ</td><td>100</td>
    </tr>
    <tr>
        <td>2行目だよ</td><td>200</td>
    </tr>
    <tr contentEditable="true">
        <td>3行目だよ</td><td>300</td>
    </tr>
</table>
<button disabled>無効ボタン</button>
<input type="text" disabled value="無効テキスト"/>
<button>有効ボタン</button>
<input type="text" value="有効テキスト"/>
男性<input type="radio" value="male" name="gender"/>
女性<input type="radio" value="female" name="gender"/>
不明<input type="radio" checked value="unknown" name="gender"/>
</body>
</html>

f:id:liguofeng29:20160127222137g:plain