個人的によく使う 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で共有していただければ幸いです。