CSS #05 疑似クラス

  • このエントリーをはてなブックマークに追加
  • LINEで送る

 

こんにちは!
UPSTARTSのSベンです!

 

今回は「疑似クラス」についての内容です。

 

以下のhtmlにスタイルをあてていきます。

 

疑似クラス

疑似クラスとは、ある要素が特定の状態のときに使うものになります。

 

リストの疑似クラス

first-child

first-childは、

リストの一番上の要素を指定することができます。

 

書き方は以下になります。

 

last-child

last-childは、

先ほどのfirst-childとは逆で、リストの一番下の要素を指定することができます。

 

書き方は以下になります。

 

 

リンクの疑似クラス

リンクの疑似クラスでは、

未訪問のリンクはlink

訪問済みのリンクはvisited

リンクにマウスが乗ったときはhover

マウスをクリックしたときはactive

 

上記の4つを指定することができます。

上記の順番で書かないと、意図しない表示になってしまう可能性がありますので、
順番を間違えないように気を付けてください。

 

では書き方を見ていきましょう。

 

フォーカス

では次にある要素にフォーカスが当たったとき

というセレクタをやっていきましょう。

 

テキストフィールドにスタイルをあててみます。

 

このようにすると、テキストフィールドをクリックした時に

フィールドの色が青くなります。

 

 

 

 

 

今回は疑似クラスについてやっていきました。

次回は「疑似要素」についてです。

 

ではまた次回!


  • このエントリーをはてなブックマークに追加
  • LINEで送る