疑似クラスの基本|書き方、使用例とサンプル

HTML&CSS

疑似クラスとは

疑似クラスは指定したセレクタの全体にスタイルを反映させることができます。

例えば、疑似クラス《hover》を【sample】クラスに付ける場合、

.sample:hover {
	background-color:red;
}

【sample】クラスの全体を対象にスタイルが反映されます。

疑似クラス《hover》はマウスを要素に乗せた場合に実行されます。

上記のソースコードを実行すると、

こんな感じにマウスを要素に乗せると背景が赤色へと変化します。

疑似要素と疑似クラスの違い

疑似クラスがセレクタの全体にスタイルを反映するのに対し、疑似要素は要素の一部分にスタイルを反映させます。

例えば、疑似要素《first-letter》を【sample】クラスに付ける場合、

.sample::first-letter{
	color:red;
}

【sample】クラスの一部分を対象にスタイルが反映されます。

疑似クラス《first-letter》は文字の最初を対象に実行されます。

上記のソースコードを実行すると、

こんな感じに文字の最初が赤色へと変化します。

また、疑似要素はコロン2個「::」で表すのに対し、疑似クラスはコロン1個「:」で表します。 

詳しくは以下のリンク先で解説しています。

使用頻度(高)疑似クラスの種類

高頻度で使用する疑似クラスは以下の通りです。

  • :hover
  • :first-child
  • :last-child
  • :link
  • :visited
  • :nth-child(n)
  • :nth-of-type(n)

上記の7つの疑似クラスは利用する機会の多い疑似クラスです。

それぞれの使い方を見ていきます。

:hover

疑似クラス(:hover)は、マウスポインタを要素の上に乗せた時にスタイルを適用します。

以下、画像は例です。

以下は画像のソースコードです。

.sample:hover{
	background-color:red;
}

:first-child

疑似クラス(:first-child)は、最初の要素にスタイルを適用します。

以下、画像は例です。

以下は画像(CSS)のソースコードです。

.sample li:first-child {
	background-color:blue;
}

以下は画像(HTML)のソースコードです。

<ul class="sample">
<li>最初のココが青色になる</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

:last-child

疑似クラス(:last-child)は、最後の要素にスタイルを適用します。

以下、画像は例です。

以下は画像(CSS)のソースコードです。

.sample li:last-child {
	background-color:green;
}

以下は画像(HTML)のソースコードです。

<ul class="sample">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>最後のココが緑色になる</li>
</ul>

:link

疑似クラス(:link)は、クリックされていないリンクにスタイルを適用します。

クリックすると、そのクリック後は通常の青色のリンクに戻ります。

以下、画像は例です。

以下は画像(CSS)のソースコードです。

.sample:link {
	color: red;
}

以下は画像(HTML)のソースコードです。

<a class="sample" href="#1">未訪問のリンクは赤色になる</a>

:visited

疑似クラス(:visited)は、クリックされたリンクにスタイルを適用します。

以下、画像は例です。

以下は画像(CSS)のソースコードです。

.sample:visited {
	color: green;
}

以下は画像(HTML)のソースコードです。

<a class="sample" href="#1">訪問後のリンクは緑色になる</a>

:nth-child(n)

疑似クラス《:nth-child(n)》は、始めの要素から数えて(n)番目にスタイルを適用します。

ただし、この間に存在する子要素もカウントに含まれます。

例えば、

  • (n)の中に「3」を入れると、三番目を指定
  • (n)の中に「3n」を入れると、偶数目を指定(子要素を含む)
  • (n)の中に「3n-1」を入れると、奇数目を指定(子要素を含む)

以下、画像は例です。

以下は画像のソースコードです。

.sample li:nth-child(3n) {
	color:blue;
}

:nth-of-type(n)

疑似クラス《:nth-of-type(n)》は、始めの要素から数えて(n)番目にスタイルを適用します。

前項の《:nth-child(n)》とは異なり、この間に存在する子要素をカウントに含みません。

例えば、

  • (n)の中に「3」を入れると、三番目を指定
  • (n)の中に「3n」を入れると、偶数目を指定
  • (n)の中に「3n-1」を入れると、奇数目を指定

以下、画像は例です。

以下は画像のソースコードです。

.sample li:nth-of-type(3n) {
	color:red;
}

疑似クラスのクイズ!

疑似クラスの使い方を覚えよう!

リンクをクリックする前は赤色、また、クリックした後で通常のリンク色である青色に変化したとする。

以下の画像の場合における正しい疑似クラスは何か?

要素にマウスポインタを乗せたとする。

以下の画像の場合における疑似クラスは何か?

以下に該当する疑似クラスは何か?

リンクをクリックした後、リンクの色が緑色に変化したとする。

この場合における考えられる疑似クラスは何か?

以下に該当する疑似クラスは何か?

計5つのリストを作成したとする。

以下の画像の場合における疑似クラスは何か?

計5つのリストを作成したとする。

以下の画像の場合における疑似クラスは何か?

Your score is

疑似クラスを使ってみよう!

疑似クラスはコロン1個「:」をセレクタの後に付けて疑似クラスを指定するだけです。

逆に、疑似要素はコロン2個「::」をセレクタの後に付けて指定します。

疑似クラスや疑似要素は、部分的な細かなコーティングに欠かせない存在でリストをカスタマイズする際、Font Awesome等のWebアイコンを利用する際にも多用します。

疑似クラスと疑似要素は覚えて損は無いので、この際にマスターしてみてはいかがでしょうか。

HTML&CSS
国内シェアNo.1「エックスサーバー
Word Press初心者向けのサーバーでホームページ・ブログが初めての方でも簡単に始めることができます。また、毎日、自動でバックアップをサーバーに保存してくれる他、昔からあるサーバーなので情報量が多く、トラブルになっても検索して自分で解決することができます。

1. WordPress簡単インストール
2. 毎日、自動バックアップ
3. 手動バックアップ可
4. 無料で復旧可能(14日)
5. 複数のドメイン運用可
6. 基本プランでも大容量
7. 手厚いサポート

迷ったらエックスサーバーにすれば大丈夫。
低コストから成長「カラフルボックス
低コストからホームページ・ブログを始められるサーバーです。サイトの成長に合わせてプランを変更することで高性能なサーバーへ徐々に切り替えることもできます。ホームページとサーバーが一緒に成長でき、低コストながら初心者の方向けの機能も豊富です。かんたん操作のコンパネによって初めての方でも簡単に始めることができます。

1. 低コストから始められる
2. かんたん操作のコンパネ
3. 自動バックアップ(14日)
4. マルウェア・改ざんを防止
5. サーバーは超高速
6. 充実したサポート

お試し運用ならカラフルボックス。
ぜろぶろぐ

コメント

タイトルとURLをコピーしました