ホーム HTML CSS XML JAVASCRIPT   PHP SQL MORE...   リファレンス 事例集    

CSS3 Selectors Reference

« 前章へ 次のリファレンス »

セレクタは、どの要素にスタイルを設定するのかを選択するために使用するパターンです。

CSS3 仕様には、新しいセレクタがいくつか含まれていますが、その多くは最新のブラウザ ですでに実装されています。

次の表は、新 CSS3 セレクタの一覧です:

パターン 例 例の説明 CSS
element1~element2 p~ul p 要素が先行するすべての ul 要素を選択します 3
[attribute^=value] a[src^="https"] src 属性の値が "https" で始まるすべての a 要素を選択します 3
[attribute$=value] a[src$=".pdf"] src 属性の値が ".pdf" で終わるすべての a 要素を選択します 3
[attribute*=value] a[src*="w3schools"] src 属性の値が 部分文字列 "w3schools" を含むすべての a 要素を選択します 3
:first-of-type p:first-of-type その親要素に対する最初の p 要素であるすべての p 要素を選択します 3
:last-of-type p:last-of-type その親要素に対する最後の p 要素であるすべての p 要素を選択します 3
:only-of-type p:only-of-type その親に対して唯一の p 要素であるすべての p 要素を選択します 3
:only-child p:only-child その親要素の単独の子であるすべての p 要素を選択します 3
:nth-child(n) p:nth-child(2) その親要素の2番目の子であるすべての p 要素を選択します 3
:nth-last-child(n) p:nth-last-child(2) 最後の子からカウントして、その親要素の2番目の子であるすべての p 要素を選択します 3
:nth-of-type(n) p:nth-of-type(2) その親要素の2番目の p 要素であるすべての p 要素を選択します 3
:nth-last-of-type(n) p:nth-last-of-type(2) 最後の子からカウントして、その親の2番目の p 要素であるすべての p 要素を選択します 3
:last-child p:last-child その親要素の最後の子であるすべての p 要素を選択します 3
:root :root 文書のルート要素を選択します 3
:empty p:empty 子を持たないすべての p 要素を選択します（テキストノードを含みます） 3
:target #news:target 現在アクティブな #news 要素を選択します（アンカー名を含むURLをクリックされた場合） 3
:enabled input:enabled 有効なすべての input 要素を選択します 3
:disabled input:disabled 無効なすべての input 要素を選択します 3
:checked input:checked チェックされたすべての input 要素を選択します 3
:not(selector) :not(p) p 以外の全要素を選択します 3
::selection ::selection ユーザにより選択された要素の一部を選択します 3

« 前章へ 次のリファレンス »