目次
擬似要素と擬似クラスの種類と使い方[後編]
今回は、擬似要素と擬似クラスの種類と使い方[後編]の擬似クラスについて解説していきます。
主な擬似クラスは以下になります。
| :hover | 要素をホバーしたときの指定 |
| :active | 要素をクリックして離すまでの指定 |
| :focus | 要素をクリックした後の指定 |
| :link | まだ訪問していないリンクに対しての指定 |
| :visited | 訪問したリンクに対しての指定 |
| :checked | ラジオボタンなどがチェックされた時の指定 |
| :nth-child(n) | 親要素内のn番目の子要素を指定 |
| :first-child | 親要素内の最初の子要素を指定 |
| :last-child | 親要素内の最後の子要素を指定 |
| :nth-of-type(n) | 親要素内で同じ種類の子要素のn番目を指定 |
| :not(A) | A以外の要素に対して指定 |
それでは、デモを使いながら解説していきます。
擬似クラスの種類と使い方
擬似クラスとは？
擬似クラスとは、HTML要素が特定の状態のときに、スタイルを適用する場合に使います。
例えば、『:focus』を指定した場合、要素をクリックした後のスタイルを適用します。
HTML
<a href="#" class="link-red">ページクリック後の指定</a>
CSS
.link-red{
font-size: 1.5em;
}
.link-red:focus {
color: red;
}
ブラウザでの表示
このように、擬似クラスを使うと、特定の状態のとき(ここで言うクリックした後)のスタイルを適用することができます。
それでは、それぞれの擬似クラスの使用例を見ていきましょう。
:hover
:hoverは、要素をホバーしたときの指定を行います。
使用例
See the Pen WNxGrdM by ryu (@ryu-no-sss) on CodePen.
:active
:activeは、要素をクリックして離すまでの指定を行います。
使用例
See the Pen RwRGrVa by ryu (@ryu-no-sss) on CodePen.
デモの『クリックしてね！』をクリックすると、クリックをして離すまでは、テキストが赤くなりますが、クリック後は、元のスタイルに戻っているのがわかります。
:focus
:focusは、要素をクリックした後の指定を行います。
使用例
See the Pen ExygPGY by ryu (@ryu-no-sss) on CodePen.
:link
:linkは、まだ訪問していないリンクに対しての指定を行います。
使用例
See the Pen NWrRxJz by ryu (@ryu-no-sss) on CodePen.
:visited
:visitedは、訪問したリンクに対しての指定を行います。
使用例
See the Pen RwRGrOV by ryu (@ryu-no-sss) on CodePen.
:checked
:checkedは、ラジオボタンなどがチェックされた時の指定を行います。
使用例
See the Pen pobEyJY by ryu (@ryu-no-sss) on CodePen.
:nth-child(n)
:nth-child(n)は、親要素内のn番目の子要素を指定を行います。
使用例
See the Pen pobEyyB by ryu (@ryu-no-sss) on CodePen.
:first-child
:first-childは、親要素内の最初の子要素を指定を行います。
使用例
See the Pen gOMwrwe by ryu (@ryu-no-sss) on CodePen.
:last-child
:last-childは、親要素内の最後の子要素を指定を行います。
使用例
See the Pen bGewpBm by ryu (@ryu-no-sss) on CodePen.
:nth-of-type(n)
:nth-of-type(n)は、親要素内で同じ種類の子要素のn番目を指定を行います。
使用例
See the Pen vYKXGxW by ryu (@ryu-no-sss) on CodePen.
:not(A)
:not(A)は、A以外の要素に対して指定を行います。
使用例
See the Pen abZmNwm by ryu (@ryu-no-sss) on CodePen.
まとめ
前回と今回で、主要な擬似要素と擬似クラスについて解説しました。
主要な擬似要素
| :before | 要素の前に追加される |
| :after | 要素の後に追加される |
| :first-letter | 要素の一文字目を指定 |
| :first-line | 要素の1行目を指定 |
| :selection | テキスト要素をクリックまたは、ドラッグした際の要素を指定 |
主要な擬似クラス
| :hover | 要素をホバーしたときの指定 |
| :active | 要素をクリックして離すまでの指定 |
| :focus | 要素をクリックした後の指定 |
| :link | まだ訪問していないリンクに対しての指定 |
| :visited | 訪問したリンクに対しての指定 |
| :checked | ラジオボタンなどがチェックされた時の指定 |
| :nth-child(n) | 親要素内のn番目の子要素を指定 |
| :first-child | 親要素内の最初の子要素を指定 |
| :last-child | 親要素内の最後の子要素を指定 |
| :nth-of-type(n) | 親要素内で同じ種類の子要素のn番目を指定 |
| :not(A) | A以外の要素に対して指定 |
擬似要素については、以下の記事で解説しています。
それでは、最後まで読んでいただきありがとうございました。
