疑似クラスとは
疑似クラスは指定したセレクタの全体にスタイルを反映させることができます。
例えば、疑似クラス《hover》を【sample】クラスに付ける場合、
.sample:hover {
background-color:red;
}【sample】クラスの全体を対象にスタイルが反映されます。
疑似クラス《hover》はマウスを要素に乗せた場合に実行されます。
上記のソースコードを実行すると、
こんな感じにマウスを要素に乗せると背景が赤色へと変化します。
疑似要素と疑似クラスの違い
疑似クラスがセレクタの全体にスタイルを反映するのに対し、疑似要素は要素の一部分にスタイルを反映させます。
例えば、疑似要素《first-letter》を【sample】クラスに付ける場合、
.sample::first-letter{
color:red;
}【sample】クラスの一部分を対象にスタイルが反映されます。
疑似クラス《first-letter》は文字の最初を対象に実行されます。
上記のソースコードを実行すると、
こんな感じに文字の最初が赤色へと変化します。
また、疑似要素はコロン２個「::」で表すのに対し、疑似クラスはコロン１個「:」で表します。
詳しくは以下のリンク先で解説しています。
使用頻度（高）疑似クラスの種類
高頻度で使用する疑似クラスは以下の通りです。
- :hover
- :first-child
- :last-child
- :link
- :visited
- :nth-child(n)
- :nth-of-type(n)
上記の７つの疑似クラスは利用する機会の多い疑似クラスです。
それぞれの使い方を見ていきます。
: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）の中に「3n」を入れると、偶数目を指定（子要素を含む）
- （n）の中に「3n-1」を入れると、奇数目を指定（子要素を含む）
以下、画像は例です。
以下は画像のソースコードです。
.sample li:nth-child(3n) {
color:blue;
}:nth-of-type(n)
疑似クラス《:nth-of-type(n)》は、始めの要素から数えて（ｎ）番目にスタイルを適用します。
前項の《:nth-child(n)》とは異なり、この間に存在する子要素をカウントに含みません。
例えば、
- （n）の中に「３」を入れると、三番目を指定
- （n）の中に「3n」を入れると、偶数目を指定
- （n）の中に「3n-1」を入れると、奇数目を指定
以下、画像は例です。
以下は画像のソースコードです。
.sample li:nth-of-type(3n) {
color:red;
}疑似クラスのクイズ！
疑似クラスを使ってみよう！
疑似クラスはコロン１個「:」をセレクタの後に付けて疑似クラスを指定するだけです。
逆に、疑似要素はコロン２個「::」をセレクタの後に付けて指定します。
疑似クラスや疑似要素は、部分的な細かなコーティングに欠かせない存在でリストをカスタマイズする際、Font Awesome等のWebアイコンを利用する際にも多用します。
疑似クラスと疑似要素は覚えて損は無いので、この際にマスターしてみてはいかがでしょうか。
コメント