CSSの疑似要素とは要素の一部にスタイルを適用させる指定方法です。HTMLの要素を疑似的にCSSで作り出すといった感じでしょうか。また、疑似クラスは要素が特定の状態の場合にスタイルを適用させることができるセレクタです。
このページのコンテンツ
疑似要素について
対象要素の一部にスタイルを適用したり、対象の要素に疑似的に要素を追加してスタイルを適用するセレクタを疑似要素といいます。
■疑似要素
指定したい要素::疑似要素 半角コロン2つで記述します。
疑似要素の例
プレビューサンプル
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ
上記の様に、テキストの最初の文字だけにスタイルを当てたいとします。
疑似要素を使わない場合
疑似要素無しでこれを再現する場合は、以下の方法が考えられます。
<p><span>吾</span>輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ</p>
p span {
font-size: 23px;
color: #ff0000;
font-weight: 900;
}
上記でも全く同じスタイルが当たるので一見よさそうに見えますが、例えば記事部分の全てのpに適用させようと思った場合、全てのpの1文字目をspanタグで囲わなければなりません。作業量も多くなりメンテナンス性も高いとは言えません。
疑似要素を使用した場合
疑似要素を使えば、HTMLには一切の手を付けずに同じスタイルを適用できます。
p::first-letter {
font-size: 23px;
color: #ff0000;
font-weight: 900;
}
疑似要素の種類
A::before
要素の直前にコンテンツが追加されます。
最近多いのは、Font Awesomeなどのアイコンをリストの先頭などに表示させる時に多用します。colorやmarginなどのプロパティはcontent:"";内に追加されたものに対して適用されます。
プレビューサンプル
テキストテキストテキスト
<p class="example">テキストテキストテキスト</p>
example::before {
content: "ここが追加されたコンテンツ";
color: #ff0000;
}
A::after
要素の直後にコンテンツが追加されます。
これもFont Awesomeなどのアイコンをテキストの直後などに表示させる時に多用します。::before同様、colorやmarginなどのプロパティはcontent:"";内に追加されたものに対して適用されます。
プレビューサンプル
テキストテキストテキスト
<p class="example">テキストテキストテキスト</p>
example::before {
content: "ここが追加されたコンテンツ";
color: #ff0000;
}
A::first-letter
指定した要素の最初の行の最初の文字にスタイルが適用されます。
ただし、最初の文字より前に他のコンテンツがあると無効になります。また::before疑似要素で追加されたテキストも最初の一文字に該当します。
プレビューサンプル
テキストテキストテキスト
<p class="example">テキストテキストテキスト</p>
p.example::first-letter {
font-size: 23px;
color: #ff0000;
font-weight: 900;
}
A::first-line
指定した要素の最初の行にスタイルが適用されます。
最初の行の長さは要素の幅・文書の幅・文字サイズなどの要因により変わります。
プレビューサンプル
恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。自分は停車場のブリッジを、上
<p class="example">恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。自分は停車場のブリッジを、上</p>
p.example::first-line {
color: #ff0000;
font-weight: 900;
}
疑似クラスについて
疑似クラスは、指定した要素が特定の状態の時にスタイルを変化させたい場合のセレクタです。セレクタ単体では指定ができない状態を疑似的に選択したり、文書構造の範囲外の情報を指定するときに使います。
■疑似クラス
指定したい要素:疑似クラス 半角コロン1つで記述します。
疑似クラスの例
以下はテキストリンクのホバー時に色を変える例です。
プレビューサンプル
<p><a href="#">リンクテキスト</a></p>
p a {
color: #ff0000;
}
p a:hover {
color: #0074FF;
}
疑似クラスの種類
A:link
未訪問状態のaタグに対してスタイルを指定します。
<p><a href="#">リンクテキスト</a></p>
a:link {
color: #ff0000;
}
A:visited
訪問済み状態のaタグに対してスタイルを指定します。
<p><a href="#">リンクテキスト</a></p>
a:visited {
color: #530084;
}
A:hover
マウスホバー状態のaタグに対してスタイルを指定します。
<p><a href="#">リンクテキスト</a></p>
a:hover {
color: #0074FF;
}
A:active
要素がアクティブ状態のaタグに対してスタイルを指定します。
アクティブ状態とは、リンクをクリックしてから放すまでの間をいいます。
<p><a href="#">リンクテキスト</a></p>
a:active {
color: #FF5700;
}
A:nth-child(n)
親要素内のn番目の要素にスタイルを指定します。
<div class="parent"> <h1>タイトル</h1> <p>pタグ1</p> <p>pタグ2</p> <p>pタグ3</p> <p>pタグ4</p> </div>
/*親要素parent内の全ての要素の中で2番目の子要素がpタグの場合、色を#ff0000にする*/
.parent p:nth-child(2) {
color: #ff0000;
}
プレビューサンプル
タイトル
pタグ1
pタグ2
pタグ3
pタグ4
A:nth-of-type(n)
親要素内にある同じ種類のn番目の要素にスタイルを指定します。
上記、nth-childの様にh1は数にカウントしません。
<div class="parent"> <h1>タイトル</h1> <p>pタグ1</p> <p>pタグ2</p> <p>pタグ3</p> <p>pタグ4</p> </div>
/*親要素parent内のp要素の中で2番目のpタグの色を#ff0000にする*/
.parent p:nth-of-type(2) {
color: #ff0000;
}
プレビューサンプル
タイトル
pタグ1
pタグ2
pタグ3
pタグ4
A:not(B)
親要素内にある指定した要素を除外してスタイルを指定します。
<div class="parent"> <h1>タイトル</h1> <h2>タイトル</h2> <p>pタグ1</p> <p>pタグ2</p> <p>pタグ3</p> <p>pタグ4</p> </div>
/*親要素parent内のp要素以外の色を#ff0000にする*/
.parent :not(p) {
color: #ff0000;
}
プレビューサンプル
タイトル
タイトル
pタグ1
pタグ2
pタグ3
pタグ4
A:not(B)の応用例
A:not(B)は除外する要素に疑似クラスを指定することもできます。
/*最後のli以外のmargin-bottomを10pxに指定*/
div ul li:not(:last-of-type) {
margin-bottom: 10px;
}
まとめ
疑似要素・疑似クラスを使った要素の指定方法のご紹介でした。
疑似要素・疑似クラスを使えばCSSの記述量を減らしたり、HTMLに疑似的に要素を追加してスタイルを指定できて非常に便利です。
また、他のスタイルの指定方法として、以下の記事では「CSSセレクタ」について解説しています。合わせてご覧ください。
この記事を書いた人管理人
SAKURAGRAPHICA代表
会社員の傍ら、フリーランスでWEBサイトの制作やWordPressによるCMSの構築・障がい者の就労支援としてホームページ制作の職業指導員も行っております。
