cman.jp > WEBページ作成TOP > CSSリファレンス > セレクタ一覧
WEBページ作成
広告
CSS(スタイルシート)のセレクタ指定方法
CSS（スタイルシート）のセレクタには「要素セレクタ」「クラスセレクタ」「全てセレクタ」「疑似要素セレクタ」「疑似クラスセレクタ」「属性セレクタ」などの色々な指定することができます。
また「結合子」を使用することで色々な条件を指定することもできます。
広告
主要セレクタの一覧
主要なセレクタ一覧(W3C定義)となります。（W3CのCSS3セレクタ定義）
以下の表をクリックすると詳細を確認できます。
| 種類 | セレクタ | 規格 | 意味 | |
|---|---|---|---|---|
| 要素 セレクタ | 要素(タグ) | css1 | 要素（タグ）指定 | |
| クラス セレクタ | CLASS | css1 | クラス指定 | |
| ID セレクタ | ID | css1 | ID指定 | |
| 全 セレクタ | * , x|* , |* | css2 | 全て | |
| 疑似要素 セレクタ | ::first-letter | css1 | 最初の1文字 | |
| ::first-line | css1 | 最初の1行 | ||
| ::before | css2 | 直前 | ||
| ::after | css2 | 直後 | ||
| 疑似クラス セレクタ | 動的 | :link | css1 | 未訪問のリンク |
| :visited | css1 | 訪問済みのリンク | ||
| :hover | css1 | マウスオーバー | ||
| :active | css1 | クリックされている | ||
| :focus | css1 | フォーカスされている | ||
| ﾀｰｹﾞｯﾄ | :target | css3 | URIが参照した要素 | |
| 言語 情報 | :lang() | css2 | 指定のlang指定がある時 | |
| UI 要素 状態 | :enabled | css3 | 要素が入力可能の時 | |
| :disabled | css3 | 要素が入力不可(disabledを指定)の時 | ||
| :checked | css3 | チェックされている時 | ||
| 構造 | :root | css3 | ページのルート要素 | |
| :nth-child() | css3 | ｎ番目の子要素 | ||
| :nth-last-child() | css3 | 後ろからｎ番目の子要素 | ||
| :nth-of-type() | css3 | 同じ要素のｎ番目 | ||
| :nth-last-of-type() | css3 | 同じ要素の後ろからｎ番目 | ||
| :first-child | css2 | 要素内の最初の子要素 | ||
| :last-child | css3 | 要素内の最後の子要素 | ||
| :first-of-type | css3 | 同じ要素の最初 :nth-of-type(1)と同じ | ||
| :last-of-type | css3 | 同じ要素の最後 :nth-last-of-type(1)と同じ | ||
| :only-child | css3 | 唯一の子要素 | ||
| :only-of-type | css3 | 同じ要素の唯一の子要素 | ||
| :empty | css3 | 値（テキスト）が無い要素 | ||
| 否定 | :not() | css3 | 指定以外の時 | |
| 属性 セレクタ | [attr] | css2 | 属性「attr」を持つ | |
| [attr=xxx] | css2 | 属性「attr」の値が「xxx」 | ||
| [attr~=xxx] | css2 | 属性「attr」の値に「xxx」が含まれる （スペース区切り） | ||
| [attr|=xxx] | css2 | 属性「attr」の値に「xxx」が含まれる （ハイフン区切り） | ||
| [attr^=xxx] | css3 | 属性「attr」の値が「xxx」から始まる | ||
| [attr$=xxx] | css3 | 属性「attr」の値が「xxx」で終わる | ||
| [attr*=xxx] | css3 | 属性「attr」の値に「xxx」を含む | ||
| 結合子 | x , y | css1 | 複数セレクタ（xまたはy） | |
| x y | css1 | 子孫セレクタ（x内のy） | ||
| x > y | css2 | 子セレクタ（x階層直下のy） | ||
| x + y | css2 | 隣接セレクタ（x直後のy） | ||
| x ~ y | css3 | 兄弟セレクタ（xの後に現れるy） | ||
コロンの指定
疑似要素と疑似クラスではコロンの数が違います。ただし、疑似要素をコロン１つで記述してもほとんどのブラウザで動作します。
コロン２つの場合は、IE8など古いブラウザでは認識せずに疑似要素が反映されません。
将来はコロン２つが必須となる可能性もあり、古いブラウザでの対応が必須でない場合はコロン２つがおすすめとなります。
| css3でのコロン記述方法 | 代表的な疑似クラス | ||
|---|---|---|---|
| 疑似要素 | 「::」 コロンが２つ | ::first-letter ::first-line ::before ::after | |
| 疑似クラス | 「:」 コロンが１つ | :link :visited :hover :active :focus :target :lang() :enabled :disabled :checked :root :nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type() :first-child :last-child :first-of-type :last-of-type :only-child :only-of-type :empty :not() | |
広告