New!

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

個人的によく使う CSS3 擬似クラスの一覧を作成しました。 スタイルコーディング時にご参考にしてください。 目次 使用頻度の高い擬似クラス一覧 まとめ 使用頻度の高い擬似クラス一覧 記述例 説明 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:linka:visited ハイパーリンクのアンカーである a 要素のうち、未訪問 (:link) であるもの、訪問済 (:visited) であるもの a:activea:hovera:focus 特定のユーザーアクション状態にある a 要素 div:target URI が参照したターゲットになる div 要素 div:lang(ja) 言語情報 “ja” を持つ div 要素 elm:enabledelm: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 は思い出せても、正規表現を使った指定はなかなか思い出せません。… 続きを読む

Recent Posts

Information

Pickup Contents