記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

【サンプルコード付き】CSS擬似クラス・擬似要素を徹底解説

「擬似クラス・擬似要素」を、初心者の方向けに紹介。 基礎知識はもちろんのこと、具体的に実践で使える方法をサンプルコード付きで詳しく解説。サンプルコード付きなので実際に手を動かして学ぶ事ができ、ご自身のweb制作に活かす事ができます。

カテゴリ: HTML/CSS

こんにちは!
「擬似クラス・擬似要素って何・・?」「擬似クラス・擬似要素の基礎知識を学びたい・・!」「擬似クラス・擬似要素を実践的に使用できるようになりたい・・!」

そのように考えている、初心者web制作者の方も多いのではないでしょうか?

擬似クラス・擬似要素を使いこなせると、条件時のスタイル変更や、要素の追加・指定ができ、制作の幅が広がります。
初心者から一歩ぬけだすためにも大切な知識といえるでしょう。

今回は初心者の方向けに、「擬似クラス」「擬似要素」について詳しく解説していきます。

目次

擬似クラスとは

擬似クラスとは、特定の条件時に指定したスタイルが適用されるクラスです。
例えばカーソルがボタンに乗った時だけ、赤色にボタンの色が変わるなどの特定条件の事です。

主な擬似クラス

擬似クラス 内容
:link リンクが未訪問である場合を指定してスタイル適用
:visited リンクが訪問済みである場合を指定してスタイルを適用
:hover 要素にマウスを載せた時にスタイル適用
:active リンクをクリックしてからクリックが終わるまでの状態時にスタイル適用
:focus 要素にフォーカスがある時にスタイル適用
:target リンクのターゲット先の要素にスタイルを適用
:nth-child(n) 親要素のn番目にスタイルを適用
:nth-last-child(n) 親要素の最後から数えてn番目にスタイルを適用
:nth-of-type(n) 並んでいる要素のn番目にスタイルを適
:nth-last-of-type(n) 並んでいる要素の最後から数えてn番目にスタイルを適用
:first-child すべての要素の最初を指定しスタイルを適用
:last-of-type 親要素の最後を指定しスタイルを適用
:first-of-type 並んでいる要素の最初を指定しスタイルを適用
:last-of-type 並んでいる要素の最後を指定しスタイルを適用
:not(要素A) 要素A以外のものにスタイル適用

それぞれ詳しく見ていきます。

:link(リンクが未訪問である場合を指定してスタイル適用)

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
:linkを指定し、まだ一度も訪問した事ないリンクが赤色で表示されています。
一度も訪問していない事をユーザーに分かりやすくし、クリックしてもらう確率を高める事などに使われます。

:visited(リンクが訪問済みである場合を指定してスタイルを適用)

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
:visitedを指定し、訪問済みのリンクをオレンジ色で表示しています。
「一度訪問した事があるリンク」という事をユーザーに分かりやすくし、ユーザーにとって使いやすい設定にしています。

:hover(要素にマウスを載せた時にスタイル適用)

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
:hoverを指定し、マウスがリンクに乗ったという条件時、リンクが緑色に変化しています。

:active(リンクをクリックしてからクリックが終わるまでの状態時にスタイル適用)

HTMLサンプルコード

CSSサンプルコード

※解説
:activeを指定し、リンクをクリックしてからクリックが終わるまでの間、リンクがピンクに変わっています。

:focus(要素にフォーカスがある時にスタイル適用)

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
:focusを指定し、要素にフォーカスがある間、リンクが金色に変わっています。
入力フォームなどに使われる事が多いです。

:target(リンクのターゲット先の要素にスタイルを適用)

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
:targetを使用し、リンクのターゲット先の要素にスタイルを適用しています。
今回は、ページ内リンクを指定しており、「targetにより文字色変更」をクリックすると「targetで文字色が変わります。」に遷移し、文字色が赤色に変わっています。

:nth-child(n)( 親要素のn番目にスタイルを適用)

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
div :nth-child(3)を指定し()内に3を指定している事で、親要素(div)の3番目、「項目2」に背景色緑が指定されています。

:nth-last-child(n)(親要素の最後から数えてn番目にスタイルを適用)

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
:nth-last-child(3)を指定し、親要素(div)下から数えて3番目の要素(項目4)に背景色緑を指定する事ができています。

:nth-of-type(n)(並んでいる要素のn番目にスタイルを適用)

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
div p:nth-of-type(3)を指定しp要素の3番目の要素(項目3)に背景色緑を適用しています。

:nth-last-of-type(n) (並んでいる要素の最後から数えてn番目にスタイルを適用)

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
div p:nth-last-of-type(3)を指定しp要素の下から3番目の要素(項目4)に背景色緑を適用しています。

:first-child (すべての要素の最初を指定しスタイルを適用)

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
:first-childを指定し、親要素(div)の1番目、題名に背景色緑が適用されています。

:last-of-type(親要素の最後を指定しスタイルを適用)

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
親要素(div)の1番下、「項目6」に背景色緑が適用されています。

:first-of-type(並んでいるの要素の最初を指定しスタイルを適用)

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
div p:first-of-typeを指定し、並んでいるの要素の最初を指定しスタイルを適用します。

:last-of-type(並んでいる要素の最後を指定しスタイルを適用)

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
div p:last-of-type を指定し並んでいる要素の最後を「項目6」を指定しています。

:not(要素A) (要素A以外のものにスタイル適用)

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
div :not(h2)を指定しh2以外の要素に背景色緑のスタイルを適用しています。

擬似要素とは?

擬似要素とは、要素内の特定の一部分に対して、スタイルを指定できるものです。

擬似要素では下記のような事ができます。

●要素の前や後ろにHTMLでは書かれていない要素追加

●下記のように要素の特定箇所に文字色をつける(要素の一部スタイル変更)

主な擬似要素擬似要素

擬似要素 内容
::before 要素の直前に内容追加
::after 要素の直後に内容追加
:: first-letter 要素の最初の1文字目を指定
:: first-line 要素の最初の1行目を指定

下記より内容を詳しく見ていきます。

::before(要素の直前に内容追加)

::beforeは、要素の直前にHTMLに記述されていない内容を追加する事ができます。
contentプロパティを使用し、追加したい内容をcontentに追加します。

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
テキストの直前に『おはようございます』が追加されています。
これは、 ::before要素を指定し、「content=”〇〇”」を用いて追加したい内容を〇〇の中に記載している為です。

::after(要素の直後に内容追加)

::afterは、要素の直後にHTMLに記述されていない内容を追加する事ができます。
contentプロパティを使用し、追加したい内容をcontentに追加します。

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
テキストの直後に『おはようございます』が追加されています。
これは、 ::after要素を指定し、「content=”〇〇”」を用いて追加したい内容を〇〇の中に記載している為です。

contentに画像を指定する事ができます。
サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
content:url()の()の中に画像URLもしくはファイル名を記載し表示します。
画像の場合は、contentにダブルクォーテーションをつける必要はありません。

:: first-letter(要素の最初の1文字目を指定)

:: first-letterは、要素の最初の1文字目を指定し、スタイルを変更してくれます。

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
p要素の最初の1文字目「テ」の文字色が赤色で表示さてています。
この1文字目を指定できるのが、「:: first-letter」擬似要素です。

:: first-line(要素の最初の1行目を指定)

:: first-lineは、要素の最初の1行目を指定し、スタイルを変更してくれます。

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
p要素の最初の1行目「テキスト」の文字色が赤色で表示さてています。
この1行目を指定できるのが、「:: first-line」擬似要素です。

まとめ

今回は、初心者の方向けに、「擬似クラス」「擬似要素」について詳しく解説してきました、最後にポイントをまとめます。

擬似クラスとは
特定の条件時に指定したスタイルが適用されるクラス
主な擬似クラス

擬似クラス 内容
:link リンクが未訪問である場合を指定してスタイル適用
:visited リンクが訪問済みである場合を指定してスタイルを適用
:hover 要素にマウスを載せた時にスタイル適用
:active リンクをクリックしてからクリックが終わるまでの状態時にスタイル適用
:focus 要素にフォーカスがある時にスタイル適用
:target リンクのターゲット先の要素にスタイルを適用
:nth-child(n) 親要素のn番目にスタイルを適用
:nth-last-child(n) 親要素の最後から数えてn番目にスタイルを適用
:nth-of-type(n) 並んでいる要素のn番目にスタイルを適
:nth-last-of-type(n) 並んでいる要素の最後から数えてn番目にスタイルを適用
:first-child すべての要素の最初を指定しスタイルを適用
:last-of-type 親要素の最後を指定しスタイルを適用
:first-of-type 並んでいる要素の最初を指定しスタイルを適用
:last-of-type 並んでいる要素の最後を指定しスタイルを適用
:not(要素A) 要素A以外のものにスタイル適用

擬似要素とは
要素内の特定の一部分に対して、スタイルを指定できる要素
主な擬似要素

擬似要素 内容
::before 要素の直前に内容追加
::after 要素の直後に内容追加
:: first-letter 要素の最初の1文字目を指定
:: first-line 要素の最初の1行目を指定

いかがだったでしょうか?

擬似クラス・擬似要素を使いこなせると、条件時のスタイル変更や、要素の追加・指定ができ、制作の幅が広がります。
初心者から一歩ぬけだすためにも大切な知識といえるでしょう。
本記事を参考にして頂けたら幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleアナリティクス使い倒し活用術  <AKAHON>

ダウンロード資料画像

「毎日、数値をみているけどどこをどうやって改善すれば良いのかわからない」

「Google analyticsを導入して、自社サイトのパフォーマンスを上げて欲しいといわれたけど、何をどうすればいいのかわからない」

「Web以外にも担当を兼任していて、アクセス解析に多くの時間をついやすことができない」

上記のような思いをお持ちのWeb担当者の方にはお役に立てる一冊です。

Googleアナリティクス初心者の方でも使いこなせるように、導入方法や用語、やっておきたい初期設定から具体的な活用方法まで丁寧に解説します。