MENU
コンテンツ再構築中

CSS3: 使用頻度の高い擬似クラス一覧

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

Please share it!
  • URLをコピーしました!
  • URLをコピーしました!
INDEX