[CSS] 擬似クラス・擬似要素のまとめ

CSS3になりCSSでデザインできることが大幅に増えました。
「:before」と「:after」を使うと、今まで画像を使わなければならなかったデザインがCSSだけでできてしまったりします。
今回は擬似要素について詳しく調べてみました。
擬似クラス・擬似要素とは
CSS2までは擬似クラス・擬似要素と言っても「a:hover」「a:link」「a:visited」で使うぐらいだったのであまり意識することはありませんでした。CSS3からはかなり数が増えています。
擬似クラス・擬似要素の意味を確認してみます。
擬似クラス・擬似要素とは
疑似クラス(pseudo-classes)とは要素や属性などの文書構造だけでは特定できない “ある状況にある要素”を対象としてスタイルを適用するセレクタのことです。
例えば、最初の子要素やユーザーが操作中の要素などを対象にスタイルを適用することが可能になります。 ユーザー操作による状況変化に対してスタイルを適用できるため、ウェブページに動的な効果を与えることが出来ます。一方、擬似要素(pseudo-element)とは、 要素や属性などの文書構造だけでは特定できない “要素の一部”を対象としてスタイルを適用するセレクタのことです。 例えば、要素の一行目や一文字目にスタイルを指定したり、 要素の前後にテキストや画像などを挿入することが出来ます。
擬似クラスと擬似要素の違いが分かりにくいですが、 疑似クラスは要素全体が対象になるのに対して、 疑似要素は要素の一部分だけが対象になる点が異なります。
引用:
HTMLクイックリファレンス セレクタの種類
擬似クラスっていうのは「状態」と覚えておくと解りやすいですね。
「a:visited」「a:hover」など、訪問済みの状態、マウスオーバーされている状態などです。
擬似要素は要素の一部にスタイルを設定するものと覚えておきましょう。
擬似クラス・要素を使いこなせればデザインに富んだサイトが作れるようになります。
擬似クラス名 | 内容 |
---|---|
:link | a要素のみ(訪問していないリンク) |
:visited | a要素のみ(訪問済みのリンク) |
:active | 訪問済みのリンク |
:hover | カーソルが上に乗っていて、アクティブではない要素 |
:focus | テキスト入力フィールドにフォーカスされている要素 |
:first-child | 親要素に含まれる最初の子要素 |
:last-child | 親要素に含まれる最後の子要素 |
:target | フラグメント識別子を持つURLでターゲット対象の要素 |
:enabled | 要素が有効な時 |
:disabled | 要素が無効な時 |
:checked | チェックボックス・ラジオボタンがチェックされている状態 |
:indeterminate | チェックボックス・ラジオボタンのチェックが不明なとき |
:root | ドキュメントルート要素 |
:nth-child(n) | 親要素に含まれるn番目の子要素 |
:nth-last-child(n) | 親要素に含まれる最後からn番目の子要素 |
:nth-of-type(n) | 親要素に含まれる同じ種類の要素のn番目の要素 |
:nth-last-of-type(n) | 親要素に含まれる同じ種類の要素で最後からn番目の要素 |
:first-of-type | 親要素に含まれる同じ種類の要素で最初の要素 |
:last-of-type | 親要素に含まれる同じ種類の要素で最後の要素 |
:only-child | 兄弟要素が無く、親要素の唯一の子要素 |
:only-of-type | 同じ兄弟要素が一つも無い要素 |
:empty | 子要素を持たない要素 |
:contains() | テキストの内容が与えられた部分文字列を含んでいる要素 |
:not() | 否定要素 |
- [PHP] PHP Simple HTML DOM Parserでスクレイピング
- [WordPress] twentyfifteenでa要素の下線を消す方法
- [CakePHP] Elementの使い方(変数の指定)
- [jQuery] 配列を取り出して任意の形で表示する each() append()
- [Vue.js] Vue-CLIの使い方