こんにちは！
UPSTARTSのSベンです！
今回は「疑似クラス」についての内容です。
以下のhtmlにスタイルをあてていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<body> <ul> <li>赤犬</li> <li>黄猿</li> <li>青雉</li> </ul> <p> <a href="http://uplog777.com"> UPLOG </a> </p> <p> <a href="https://www.google.co.jp/"> Google </a> </p> <p> <input type="text"> </p> </body> |
疑似クラス
疑似クラスとは、ある要素が特定の状態のときに使うものになります。
リストの疑似クラス
first-child
first-childは、
リストの一番上の要素を指定することができます。
書き方は以下になります。
|
1 2 3 |
ul li:first-child { color: red; } |
last-child
last-childは、
先ほどのfirst-childとは逆で、リストの一番下の要素を指定することができます。
書き方は以下になります。
|
1 2 3 |
ul li:last-child { color: blue; } |
リンクの疑似クラス
リンクの疑似クラスでは、
未訪問のリンクはlink
訪問済みのリンクはvisited
リンクにマウスが乗ったときはhover
マウスをクリックしたときはactive
上記の4つを指定することができます。
上記の順番で書かないと、意図しない表示になってしまう可能性がありますので、
順番を間違えないように気を付けてください。
では書き方を見ていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
a:link { color: red; } a:visited { color: orange; } a:hover { color: green; } a:active { color: yellow; } |
フォーカス
では次にある要素にフォーカスが当たったとき
というセレクタをやっていきましょう。
テキストフィールドにスタイルをあててみます。
|
1 2 3 |
input:focus { background: blue; } |
このようにすると、テキストフィールドをクリックした時に
フィールドの色が青くなります。
今回は疑似クラスについてやっていきました。
次回は「疑似要素」についてです。
ではまた次回！