[css初心者]擬似クラスについてまとめた

csscss

広告

cssを本格的に使うようになってから早くも約1ヶ月が経過しました。
使いはじめて知ったことや身についたことがたくさん出てきましたので、少しずつ紹介していきたいと思います。

擬似クラス-Pseudo-classesとは

CSSにおいて使われる疑似クラスは、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定することになります。
また、擬似クラス以外に特定の要素に対して状態を指定する場合の疑似要素というものも存在します。

よく使われる疑似クラス

  • active
  • focus
  • hover
  • before
  • after

:hover

:hoverという擬似クラスを追加することによって、ポインティングデバイスで要素に反応したものを選択する。カーソルで要素の上をホバーした時にこの状態になります。使用例としては、ホバー時に色の変化や画像の切り替え等に使うことができます。

#test{
background-image: url("images/test.jpg");
}
#test:hover{
background-image: url("images/hover.jpg");
}

:focus

CSSの擬似クラスである、:focusでは、フォーカスを持っている要素を選択。フォームなどで使わることがある。

:before :after

:beforeや:afterという疑似要素では、対象となる要素の前またはあとに指定した内容を追加する事ができます。

:active

:activeという擬似クラスでは、ユーザーによってアクティブ化されている要素（ボタンなど）を表す。<a>タグや<button>要素で使われます。

:visited

ユーザーが既に訪問したリンクを表しています。

:link

リンクの擬似クラスでは、未訪問のリンクにスタイルを適用することができます。

まとめ

擬似クラスを知る前では、hover時に画像の切り替えをすることがとても大変なことだと思っていましたが、擬似クラスを知ったことで、簡単に切り替えができることや様々な情報を取得することができるようになりました。これからも使う機会がたくさんあると思うので、使っていきたいと思います。

広告

csscss