最近見慣れない疑似クラスと疑似要素が多くなってきたからこの際まとめてみた。
はじめに
疑似クラスと疑似要素。それは、CSS使いにとって少しハードルが上がる、いわば登龍門的な存在でもあります。
CSS3が普及していなかった頃は、種類もリンク系のものが殆どでしたが、CSS3がメインとなってきた最近では数多くの疑似クラスを見かけるようになりました。
もうこうなってくると何だかわけがわからん・・・ということで、この際全部まとめてみることにしました。
疑似要素はに関しては、CSS3以前から使われていますが、ついでにまとめておきます。
というわけで下記にてご参照ください。
疑似クラスまとめ
リンク関連の疑似クラス
| 書式 | 説明 |
|---|---|
| a:link{} | 未閲覧のリンク |
| a:visited{} | 閲覧済みのリンク |
| 要素名:hover{} | ポインタが上に乗っている状態の要素 |
| 要素名:active{} | ポインタが押された状態の要素 |
構造的疑似クラス
| 書式 | 説明 |
|---|---|
| 子要素名:nth-child(式){} | (式)により、前から一定間隔で適用 |
| 子要素名:nth-last-child(式){} | (式)により、後ろから一定間隔で適用 |
| 要素名：nth-of-type(式){} | (式)により、前から一定間隔で適用（要素限定） |
| 要素名：nth-last-of-type(式){} | (式)により、後ろから一定間隔で適用（要素限定） |
| 子要素名：first-child{} | 最初の子要素に適用 |
| 子要素名：last-child{} | 最後の子要素に適用 |
| 子要素名：first-of-type{} | 最初の要素に適用（要素限定） |
| 子要素名：last-of-type{} | 最後の要素に適用（要素限定） |
| 子要素名:only-child{} | 子要素が1つである場合に適用 |
| 子要素名:only-of-type{} | 子要素が1つである場合に適用（要素限定） |
| 要素名:empty{} | 要素内容が空の場合に適用 |
| 要素名:not(セレクタ){} | (セレクタ)に該当しない要素に適用 |
| :root{} | ルート要素(html)に適用 |
その他の疑似クラス
| 書式 | 説明 |
|---|---|
| 要素名:focus{} | フォームなどでフォーカスされている状態の要素に適用 |
| 要素名:enabled{} | disabled属性が指定されていない要素に適用 |
| 要素名：disabled{} | disabled属性が指定されている要素に適用 |
| 要素名：checked{} | フォームなどでchecked属性が指定されている要素に適用 |
| 要素名：target{} | 「#」を付けたリンク先ターゲットの要素に適用 |
| 要素名：lang(言語タグ名){} | (言語タグ)の要素 |
疑似要素まとめ
| 書式 | 説明 |
|---|---|
| 要素名::first-line{} | 指定した要素の1行目に適用 |
| 要素名::first-letter{} | 指定した要素の1文字目に適用 |
| 要素名::before{content “■”} | 指定した要素の直前に”■”を挿入 |
| 要素名::after{content “■”} | 指定した要素の直後に”■”を挿入 |
まとめ
とりあえずざっと書き出してみました。それぞれの使い方の詳細は、また機会を見て作っていけたらと思いますが、とりあえず一覧でどのような疑似クラス、疑似要素があるのかの把握ができたと思います。あとはそれらをうまく使って、「イケてるCSSコーディング」をしていきましょう～^^
＜参考書籍＞
公開日：2016年11月27日
最終更新日：2017年1月12日
