よく使っている擬似クラス【CSS Advent Calendar 2017】22日目

f:id:damdom:20171203201442p:plain

はじめに

この記事は CSS Advent Calendar 2017 22日目の記事です。
擬似クラスで個人的によく使っているものを挙げていきます。


擬似クラスとは

MDN によると、

CSS の疑似クラスはセレクタに付加するキーワードであり、選択される要素に対して特定の状態を指定します。例えば :hover 疑似クラスは、選択した要素上にマウスカーソルがあるときにスタイルを適用します。

疑似クラスは疑似要素とともに、ドキュメントツリーのコンテンツの関係だけでなく、閲覧履歴 (例えば :visited)、コンテンツの状態 (例えばフォーム要素における :checked)、マウスカーソルの位置 (例えばマウスカーソルが要素上にあるかを知ることができる :hover) といった外的要因との関係についてスタイルを適用することを可能にします。

とのことです。

参考: developer.mozilla.org

擬似クラスは大きく分けると以下のようになるのではないかと思います。

  • :visited :hover :checked といった、 自分たちの操作に応じたスタイル の付与
  • :nth-child :last-child といった、 要素の並びに応じたスタイル の付与


よく使うやつ挙げます

ここで紹介するものは私がよく使っているものだけなので、他の一般的な内容は MDN など参考にしていただけると良いかと思います。

developer.mozilla.org

Codepen の内容は最新の Chrome でしか見てないので他のブラウザだと不具合があります。ベンダープレフィックスを追加すると治るかも(未検証)

また、コードについては右上にある EDIT ON CodePen をクリックすると内容を見ることができます。


リストを交互に地を追加する

  • :nth-child() 指定したn個目の要素にスタイルをつける
  • 似た仲間で :nth-of-type() があるが、こちらは様々な種類の要素があるときに、指定した特定の要素だけ拾ってカウントし、スタイルをつける

コツ

  • :nth-child( odd ) は奇数、:nth-child( even ) だと偶数のスタイルが変わる

codepen.io


リンク系

  • :hover リンクにカーソルを合わせたとき
  • :active リンクをクリックした直後
  • :visited リンク先を既に見ているとき

コツ

:hover のあとに :active のスタイルを書くことで、クリックしたときのスタイルを上書きすることができる

codepen.io


フォーム系 テキストのインプット

  • :focus button 要素や input をクリックしたとき

コツ

  • デフォルトのスタイルをリセットしておく
  • input をクリックするとアニメーションしながら横に伸びるようになっているのは transition プロパティ

codepen.io


フォーム系 チェックボックス

  • :checked checkbox や radio にチェックを入れたとき
  • :disabled input 要素に入力などの操作を無効にするとき

コツ

  • デフォルトのスタイルをリセットしておく
  • ::after::before 擬似要素を使ってチェックボックスのスタイルを実現

codepen.io


参考リンク

input 要素のリセットスタイルを参考にさせていただきました。 www.nxworld.net

わからないことがあるとここに調べに行きます。 developer.mozilla.org


CSS Advent Calendar 2017

qiita.com