もくじ
擬似要素とは
擬似要素とは、要素の一部に対してスタイルを適用できる指定方法です。
HTMLの要素を擬似的にCSSで設定できるので、HTMLコードを変更することなく装飾を適用することができます。
擬似要素を指定する際、コロンは2つです。
A::before
擬似クラスとは
擬似クラスとは指定の要素が特定の状態である場合にスタイルを適用させるセレクタです。
特定の状態とは、たとえばホバー中や訪問済みのリンク要素などです。
擬似クラスを指定する際、コロンは1つです。
A:hover
よく使う擬似要素
- HTML
<p class="example">
テスト<br>
サンプル
</p>
これをcssだけで（擬似要素を使って）スタイルを変更していきます。
A:: first-letter（要素の一文字目を指定）
要素の一文字目にスタイルを適用します。
p.example::first-letter {
color: #ff0000;
}
この場合、1文字目の「テ」のみスタイルが適用されます。
A:: first-line（要素の一行目を指定）
要素の一行目にスタイルを適用します。
p.example::first-line {
color: #ff0000;
}
この場合、1行目の「テスト」のみスタイルが適用されます。
A::before（要素の直前にコンテンツを追加）
要素の直前に指定したスタイルでコンテンツを追加します。
p.example::before {
content: "★";
color: #ff0000;
}
contentプロパティで要素の前に追加したい文字列などを指定します。
ここで指定するfont-sizeやcolorなどのプロパティ設定は追加する文字列に対して適用されます。
この場合、「★」という文字列をcolorプロパティでスタイルを指定し<p>タグの直前に追加しています。
A::after（要素の直後にコンテンツを追加）
::beforeとは対照に、要素の直後に指定したスタイルでコンテンツを追加します。
p.example::after {
content: "★";
color: #ff0000;
}
beforeとafterで画像を追加
contentプロパティに画像を指定すれば、テキストだけでなく画像も追加することが可能です。
p.example::after {
content: url( "/image.png");
}
url()はCSS関数で、ファイルを含めるために使用します。引数は絶対URL、相対URL、データURIのいずれかです。
この場合contentプロパティの値をダブルクォーテーション（シングルクォーテーション）で囲む必要はありません。
contentの中身はテキストや画像など関係なくインライン要素で配置されます。
よく使う擬似クラス
A:link（未訪問のリンク要素の指定）
aタグに対して、そのリンクが未訪問の状態である場合を指定してスタイルを適用します。
a:link {
color: # ff0000;
}
A:visited（訪問済のリンク要素の指定）
aタグに対して、そのリンクが訪問済の状態である場合を指定してスタイルを適用します。
a:visited {
color: #a700fe;
}
A:hover（要素にマウスがホバーした際の指定）
要素に対してマウスがホバーした状態を指定してスタイルを適用させます。
a:hover {
color: #0090ff;
}
A:active（要素がアクティブ状態になった際の指定）
要素がアクティブの状態の場合を指定してスタイルを適用させます。
aタグではマウスを左クリックしてから離すまでがアクティブ状態となります。
a:active {
color: #ffd800;
}
A:nth-child(n)（親要素内のn番目の要素の指定）
親要素内のn番目の要素を指定してスタイルを適用させます。
- HTML
<div>
<h1>見出し</h1>
<p>1番目のpタグ</p>
<p>2番目のpタグ</p>
<p>3番目のpタグ</p>
</div>
div p:nth-child(3) {
color: #ff0000;
}
この場合、親要素<div>内の全てのタグの中で3番目、つまり「<p>2番目のpタグ</p>」にスタイルが適用されます。
A:nth-of-type(n)（親要素内の同じ種類の要素の中のn番目の要素）
親要素内の同じ種類のn番目の要素を指定してスタイルを適用させます。
- HTML
<div>
<h1>見出し</h1>
<p>1番目のpタグ</p>
<p>2番目のpタグ</p>
<p>3番目のpタグ</p>
</div>
div p:nth-of-type(3) {
color: #ff0000;
}
この場合、親要素<div>の中にある同じ要素<p>タグの3番目、つまり「<p>3番目のpタグ</p>」にスタイルが適用されます。
A:not(B)（B以外の要素の指定）
親要素内の指定の要素を除外してスタイルを適用させます。
- HTML
<div>
<h1>見出し</h1>
<p>1番目のpタグ</p>
<p>2番目のpタグ</p>
<p>3番目のpタグ</p>
<span>spanタグ</span>
</div>
div :not(p) {
color: #ff0000;
}
この場合、親要素<div>内の<p>タグ以外、つまり「<h1>見出し</h1>」と「<span>spanタグ</span>」にスタイルが適用されます。
まとめ
擬似クラスなどを使うことで、クラス名を考えたりする手間も省けますし、CSSのみの記述なので修正も比較的楽にできると思います。
身につけておくときっと他人と小さな差が生まれますね！
参考URL
【初心者向け】CSSの擬似要素と擬似クラスを理解しよう！ : ビジネスとIT活用に役立つ情報
url() - CSS: カスケーディングスタイルシート | MDNurl() - CSS: カスケーディングスタイルシート | MDN
