ほんっとにはじめてのHTML5とCSS3：【66】擬似クラスと疑似要素（2つの違いとそれぞれの特徴）

【66】擬似クラスと疑似要素（2つの違いとそれぞれの特徴）

最終更新日：2023年06月21日　（初回投稿日：2023年06月21日）

今回から、疑似クラス や 疑似要素 について見ていきましょう。
今回はまず全体像の話。この↑2つの違いとそれぞれの特徴をまとめてみます。

疑似クラス ・ 疑似要素は、今までやってきた エレメンタルセレクターや 属性セレクターにくっつけて使うことで、より詳細なセレクターを作ることができます。
そして、この2つを使うことで HTML や CSS をスッキリ短くすることもできるんです。

本日のINDEX

擬似クラス（Pseudo-classes）と疑似要素（Pseudo-elements）

どちらも エレメンタルセレクター や 属性セレクター にくっつけて使います。

擬似クラスは、:（コロン）で始まります。

基本のセレクター:擬似クラス { プロパティ: 値 }

擬似要素は、::（ダブルコロン）で始まります。

基本のセレクター::擬似要素 { プロパティ: 値 }

初期の頃の疑似要素は、擬似クラスと同じで先頭が :（コロン）でしたが、
Selectors Level 3 から、擬似クラスと区別するために ::（ダブルコロン）を使うことになりました。

Level 2 までにすでに登場していた4つの疑似要素「::first-letter」「::first-line」「::before」「::after」は、当初の仕様では「:」で始まってたんですよ。
なので、この4つだけは「:」で書いてもエラーにならないように、最新ブラウザでも互換があります。
ただし、Level 3 以降に登場した疑似要素（::marker とか）は「::」で書かないと無効。
なので、これから覚えるなら、疑似要素は「::」で書くと覚えたほうがイイです。

使い方は、例えば「疑似クラス :active 」だったら、<a>要素にくっつけて a:active といったかんじで使います。
くっつけずに単に :active だけでセレクターにすることもできます。その場合、対象になる要素は、その疑似クラス・疑似要素によって違ってきます。

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

まず、擬似クラス。
これは、要素とその中のコンテンツ全体をセレクトします。

まるでその要素に新しく「class属性」を追加してスタイル指定をしているかのような動作をします。（実際は追加してなくてHTMLはそのままなんだけど）
だから擬似的な class(属性) ということで擬似クラスと呼ぶみたい。

例えば、li:nth-child(2n) {background:#ccc} なら、<li>要素の偶数（2の倍数）番目だけスタイルを変えるって指定ですが、擬似クラス無しだったら、偶数番目の <li>要素全部にクラス属性を指定しなきゃでいけないので作業が大変です。

そして 擬似クラスは、要素のある状態をセレクトします。
li:nth-child(2n) {background:#ccc} なら、<li>要素が偶数番目に存在する状態。
また、a:hover {color: red} なら <a>要素がユーザーによってマウスオーバーした状態。
擬似クラス無しなら、Javascriptなどで「マウスオーバー状態」を検出して「class属性」を追加するとかしないとスタイルを変えるなんてできません。それをあっさりやれるのが擬似クラス。

それに対して、擬似要素は、
要素とその中のコンテンツのある一部分をセレクトします。

まるでそのコンテンツに新しく「要素」を追加してスタイル指定をしているかのような動作をします。（実際は追加してなくてHTMLはそのままなんだけど）
だから擬似的な要素ということで疑似要素と呼ぶらしい。

例えば、p::first-letter {color: red} と指定すれば、その要素の中のコンテンツの最初の1文字だけ（ある一部分）に対してのスタイル指定になります。これは
疑似要素が無かったら、最初の1文字を 要素などで囲んでスタイル指定するしかないよね。

また、擬似要素は、要素の中のコンテンツを部分的に新たに生成することもできちゃいます。
「::before」「::after」は、あらかじめスタイルを指定したコンテンツを、指定した要素内の前方や後方に生成する疑似要素です。 CSSだけでここまでできるって便利ですよね。
（「::before」「::after」も、詳細は後日の記事で）

擬似クラスは、ある「状態」をセレクト

というわけで、擬似クラスの便利さを、使った場合と使わない場合を比較してみます。

このように、リストのテキストを読みやすいように、しましまにスタイルを変えたい時。

See the Pen エレメンタルセレクターと擬似クラスTEST by yuki★hata (@yuki__hata) on CodePen.

擬似クラスを使わない場合は、HTMLでスタイルを変えたい <li>要素ぜんぶに class属性を付けるしかない。
このサンプルは全部で6行だけど、すっごい行数のリストだったら、この作業だけでもヘロヘロです。

<ul>
  <li>リストテキスト</li>
  <li class="stripe">リストテキスト</li>
  <li>リストテキスト</li>
  <li class="stripe">リストテキスト</li>
  <li>リストテキスト</li>
  <li class="stripe">リストテキスト</li>
</ul>

で、CSSで class名のある <li>要素に別の背景色を指定するかんじです。

li {background:#e5e5ff} /*基本の<li>要素の指定*/
li.stripe {background:#ffe5f2} /*class名stripeの<li>要素の指定*/

でも、擬似クラスを使った場合は、HTMLはシンプルなままでOK。

<ul>
  <li>リストテキスト</li>
  <li>リストテキスト</li>
  <li>リストテキスト</li>
  <li>リストテキスト</li>
  <li>リストテキスト</li>
  <li>リストテキスト</li>
</ul>

CSSで擬似クラス :nth-child(2n) を使って偶数行のスタイルを変えます。

li {background:#e5e5ff}
li:nth-child(2n) {background:#ffe5f2}

:nth-child( ) は、兄弟要素を何番目にある状態かでセレクトする擬似クラスです。

:nth-child(2n) は「2の倍数」番目ということで偶数番目のこと。:nth-child(even) でもOK。
奇数なら、:nth-child(2n+1)、または:nth-child(odd) と書きます。（詳細は後日の記事で）

属性セレクターでも 擬似クラスを使ってみます。
まずHTMLはこんなかんじ。

<ul>
  <li><a href="https://ex.com">https://ex.com へのリンク元</a></li>
  <li><a href="#demo">#demo へのリンク元</a></li>
</ul>

CSSはコレ。擬似クラス :any-link を使っています。

a:any-link {color:blue}
a[href^="#"]:any-link {color:orange}

[ ] で出来てる属性セレクターにも、擬似クラスをそのままくっつけて使えます（2行目）
属性セレクター [href^="#"] は、この場合は「href属性の値が#から始まる要素」というモノでしたね。
:any-link は、リンク元な要素で、まだ未訪問のリンクである状態と、訪問済みのリンクである状態を両方セレクトする擬似クラスです。（詳細は後日の記事で）

プレビューです。
先頭に # が付いた <a href="#demo"> の要素は文字色がオレンジ色になってますね。

See the Pen 属性セレクターと擬似クラスTEST by yuki★hata (@yuki__hata) on CodePen.

擬似要素は、ある特定の「部分」をセレクト

擬似要素でも、使った場合と使わない場合を比較してみます。

こんなふうに、段落の最初の1文字だけスタイルを変えたい場合。

See the Pen エレメンタルセレクターと擬似要素TEST by yuki★hata (@yuki__hata) on CodePen.

疑似要素を使わない場合は、HTMLで、最初の1文字を 要素で囲むしかない。
本文中のすべての 要素の最初の1文字に を仕込むことを考えたら...すごい作業量ですよね。

<p><span>疑</span>似要素は、要素とその中にあるコンテンツの「一部分」をセレクトします。</p>
<p><span>ま</span>るでそのコンテンツに新しく「要素」を追加して、スタイルを指定しているかのような
動作をします。</p>

で、CSSで 要素に対してスタイル指定します。

p > span {
	font-size:1.5em;
	font-weight:bold;
	color:maroon;
    }

でも、擬似要素を使った場合は、HTMLはシンプルなままでOK。
なんて要りません。

<p>疑似要素は、要素とその中にあるコンテンツの「一部分」をセレクトします。</p>
<p>まるでそのコンテンツに新しく「要素」を追加して、スタイルを指定しているかのような
動作をします。</p>

CSSで擬似要素 ::first-letter を使って最初の文字だけスタイルを変えます。

p::first-letter {
	font-size:1.5em;
	font-weight:bold;
	color:maroon;
    }

::first-letter は、これをくっつけたセレクターの全部でなくある一部分、コンテンツの最初の1文字だけをセレクトする疑似要素です。（詳細は後日の記事で）

擬似要素を 属性セレクターにも使ってみます。
まずHTMLはこんなかんじ。

<p lang="en-us en-gb en-au en-nz">Hello! I'm glad to meet you.</p>
<p lang="ja">こんにちは！</p>
<p lang="en">Hi, I'm happy to see you.</p>

CSSはコレ。擬似要素 ::before を使っています。

p[lang|="en"]::before {
  content: "★";
  color:green;
}
p:not([lang|="en"])::before {
  content: "◯";
  color:red;
}

属性セレクター [lang|="en"] は、この場合は「lang属性の値のハイフンより前が en である要素（単に en な要素も含む）」というモノでしたね。
::before は、その要素のコンテンツ内のある一部分、前方に新たにコンテンツを生成する疑似要素です。（詳細は後日の記事で）
また、ここでは擬似クラス :not( ) も使っています（5行目）
これは「 ( ) 内の条件以外のモノ」をセレクトする擬似クラスです（これも詳細後日）

プレビューです。
lang属性の値が en または en- の 要素には、コンテンツ（テキスト）の前方に「★」が追加されています。
それ以外のもの（lang="ja"しかないけど）は「◯」が付いています。

See the Pen 属性セレクターと擬似要素TEST by yuki★hata (@yuki__hata) on CodePen.

次回予告

今回は、擬似クラス・疑似要素が、どんなものかまとめてみました。
両方とも使わないと作業が膨大になるから使ったほうがぜったい時短！です。

さて次回から、まずは擬似クラスのほうを1コずつ見ていくよ（けっこう数があります）
まず次回は、 :link　:visited　:any-link を使ってみよう。
:any-link は今日ちょっと見ましたね。
これらはロケーション擬似クラスに分類されます。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2023-06-21（Wed）│
投稿日：2023-06-21（Wed）│
カテゴリ：はじめてのCSS

Pagetop ↑

« next ホーム prev »

コメントの投稿