WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > セレクタ一覧

CSS(スタイルシート)のセレクタ指定方法

CSS(スタイルシート)のセレクタには「要素セレクタ」「クラスセレクタ」「全てセレクタ」「疑似要素セレクタ」「疑似クラスセレクタ」「属性セレクタ」などの色々な指定することができます。
また「結合子」を使用することで色々な条件を指定することもできます。

CSSの書き方

広告

主要セレクタの一覧

主要なセレクタ一覧(W3C定義)となります。(W3CのCSS3セレクタ定義
以下の表をクリックすると詳細を確認できます。

種類 セレクタ規格意味
要素
セレクタ
要素(タグ)css1要素(タグ)指定
クラス
セレクタ
CLASScss1クラス指定
ID
セレクタ
IDcss1ID指定

セレクタ
* , x|* , |*css2全て
疑似要素
セレクタ
::first-lettercss1最初の1文字
::first-linecss1最初の1行
::beforecss2直前
::aftercss2直後
疑似クラス
セレクタ
動的:linkcss1未訪問のリンク
:visitedcss1訪問済みのリンク
:hovercss1マウスオーバー
:activecss1クリックされている
:focuscss1フォーカスされている
ターゲット:targetcss3URIが参照した要素
言語
情報
:lang()css2指定のlang指定がある時
UI
要素
状態
:enabledcss3要素が入力可能の時
:disabledcss3要素が入力不可(disabledを指定)の時
:checkedcss3チェックされている時
構造:rootcss3ページのルート要素
:nth-child()css3n番目の子要素
:nth-last-child()css3後ろからn番目の子要素
:nth-of-type()css3同じ要素のn番目
:nth-last-of-type()css3同じ要素の後ろからn番目
:first-childcss2要素内の最初の子要素
:last-childcss3要素内の最後の子要素
:first-of-typecss3同じ要素の最初
:nth-of-type(1)と同じ
:last-of-typecss3同じ要素の最後
:nth-last-of-type(1)と同じ
:only-childcss3唯一の子要素
:only-of-typecss3同じ要素の唯一の子要素
:emptycss3値(テキスト)が無い要素
否定: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 , ycss1複数セレクタ(xまたはy)
x ycss1子孫セレクタ(x内のy)
x > ycss2子セレクタ(x階層直下のy)
x + ycss2隣接セレクタ(x直後のy)
x ~ ycss3兄弟セレクタ(xの後に現れるy)
ページTOP

コロンの指定

疑似要素と疑似クラスではコロンの数が違います。ただし、疑似要素をコロン1つで記述してもほとんどのブラウザで動作します。
コロン2つの場合は、IE8など古いブラウザでは認識せずに疑似要素が反映されません。

将来はコロン2つが必須となる可能性もあり、古いブラウザでの対応が必須でない場合はコロン2つがおすすめとなります。

css3でのコロン記述方法代表的な疑似クラス
疑似要素「::」 コロンが2つ::first-letter
::first-line
::before
::after
疑似クラス「:」 コロンが1つ: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()
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン