コーディングでよく使用するCSSの擬似クラスを習得しようコーディングでよく使用するCSSの擬似クラスを習得しよう今回は、HTML+CSSのコーディングの際によく使用する擬似クラスについて習得していきましょう。擬似クラスというのは、CSSのセレクタの後に:(コロン)をつけて指定する事で、クリックした時、マウスオーバーした時などの装飾を施す事ができます。数ある擬似クラスの中でもWebデザイナーがコーディングの際によく使うものをピックアップしてまとめてみました。参考にしていただければ幸いです。(:nth-child(倍数n))1-10:要素の前に指定したい(:before)1-11:要素の後に指定したい(:after)まとめ1.Webデザイナーがコーディングでよく使うCSSの擬似クラス1-1.要素のマウスオーバーを指定する(:hover)マウスオーバー時の装飾を指定出来ます。テキストリンクに指定します。CodePen.276791-2.要素のクリック時を指定する(:active)クリック時の装飾を指定出来ます。こちらもテキストリンクに使用する事が多いです。以下はクリックすると赤のテキストになります。CodePen.276791-3:最初の要素のみを指定する(:first-childまたは:first-of-type)最初の要素を指定する事が出来ます。CodePen.276791-4:最後の要素のみを指定する(:last-childまたは:last-of-type)最後の要素を指定する事が出来ます。CodePen.276791-5.何番目の要素のみを指定する(:nth-child(n))〜番目の要素を指定する事が出来ます。nの部分を数字にすると指定出来ます。以下は最初から5番目のテキストの色が変わっている事がわかります。CodePen.276791-6.何番目以降の要素を指定する(:nth-child(n+数字))要素のX番目以降をすべて指定する事が出来るようになります。以下は3番目以降のテキストカラーが変わっています。CodePen.276791-7.奇数の要素のみを指定する(:nth-child(odd))奇数番目の要素すべてに指定する事が出来ます。CodePen.276791-8.偶数の要素のみを指定する(:nth-child(even))偶数番目の要素すべてに指定を行う事が出来ます。(:nth-child(倍数n))〜の倍数番目の要素の指定を行う事が出来ます。5番目10番目15番目の要素のみにCSSを適用する。以下は2の倍数番目の要素のテキストカラーが変わっています。CodePen.276791-10:要素の前に指定したい(:before)要素の前の指定をしたい場合に便利です。CodePen.276791-11:要素の後に指定したい(:after)要素の後の指定をしたい場合に便利です。CodePen.27679まとめ今回は、Webデザイナーがコーディングの際に特によく使用する擬似クラスについてご紹介させていただきました。前回ご紹介した「Webデザイナーを目指す人の為のCSSプロパティ入門」「Webデザイナーを目指す人の為のHTML5タグ入門」もあわせてHTML+CSSの勉強を進めていただくと、ほぼコーディングで使用するタグなどはカバー出来ます。