個人的によく使う CSS3 擬似クラスの一覧を作成しました。
スタイルコーディング時にご参考にしてください。
INDEX
目次
- 使用頻度の高い擬似クラス一覧
- まとめ
使用頻度の高い擬似クラス一覧
| 記述例 | 説明 |
|---|---|
| div[class] | “class” 属性を持つ div 要素 |
| div[class=”xxx”] | “class” 属性の値が “xxx” である div 要素 |
| div[class~=”xxx”] | “class” 属性が空白区切りの値をとり、その値の1つが “xxx” である div 要素 |
| div[class^=”xxx”] | “class” 属性の値が “xxx” から始まる div 要素 |
| div[class$=”xxx”] | “class” 属性の値が “xxx” で終わる div 要素 |
| div[class*=”xxx”] | “class” 属性の値に “xxx” という文字列を含む div 要素 |
| div[class|=”en”] | “class” 属性の値がハイフン区切りの値をとり、その値が “en” から始まる div 要素 |
| div:nth-child(n) | n 番目の子である div 要素 |
| div:nth-last-child(n) | 後ろから数えて n 番目の子である div 要素 |
| div:nth-of-type(n) | 同じ型をもつ要素のうち n 番目にある div 要素 |
| div:nth-last-of-type(n) | 同じ型をもつ要素のうち後ろから数えて n 番目にある div 要素 |
| div:first-child | 最初の子である div 要素 |
| div:last-child | 最後の子である div 要素 |
| div:first-of-type | 同じ型をもつ要素のうち最初の div 要素 |
| div:last-of-type | 同じ型をもつ要素のうち最後の div 要素 |
| div:only-child | 唯一の子である div 要素 |
| div:only-of-type | 同じ型をもつ要素が他にない唯一の div 要素 |
| div:empty | テキストノードを含め子を持たない div 要素 |
| a:link a:visited |
ハイパーリンクのアンカーである a 要素のうち、未訪問 (:link) であるもの、訪問済 (:visited) であるもの |
| a:active a:hover a:focus |
特定のユーザーアクション状態にある a 要素 |
| div:target | URI が参照したターゲットになる div 要素 |
| div:lang(ja) | 言語情報 “ja” を持つ div 要素 |
| elm:enabled elm:disabled |
elm（UI 要素）のうち、有効 (:enabled) であるもの、無効 (:disabled) であるもの |
| elm:checked | elm（チェックボックスやラジオボタンなど）のうち、チェックされた (:checked) もの |
| div::first-line | div 要素の最初の整形済行 |
| div::first-letter | div 要素の先頭文字 |
| div::before | div 要素の内容の前にある generated content |
| div::after | div 要素の内容の後にある generated content |
| div:not(sel) | 単体セレクタ sel にマッチしない div 要素 |
| div elm | div 要素の子孫である elm 要素 |
| div > elm | div 要素の子である elm 要素 |
| div + elm | div 要素の直後に現れる elm 要素 |
| div ~ elm | div 要素のあとに現れる elm 要素 |
まとめ
長く CSS を触っていないと、解決方法は思いついても、肝心の記述方法を忘れていることが多々あります。
特に、擬似クラスは :before,:after や nth-child は思い出せても、正規表現を使った指定はなかなか思い出せません。
今回のメモが、Web デザイナーのスタイルコーディングのお役に立てれば幸いです。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
