CSSセレクタと id class

CSS のセレクタに関してまとめます。

HTML要素の id と class

HTMLの要素をCSSで選択できるようにするためには、最低限、その要素のid属性かclass属性をつける必要があります。idとclassの使い分けは以下の通りです。

表1:

id	ページ内で固有の名前
class	ページ内で複数回同じ名前を使用可能

基本的なセレクタ

基本的なセレクタは、以下の3種類です。

表2:

タイプセレクタ	要素名	h1 { color:red;}
idセレクタ	#id名	#hg { color:red; }
classセレクタ	要素名.class名	h1.hg { color:red; }

classセレクタの要素名は省略可能です。その場合、指定したクラス名に該当するあらゆる要素が選択されます。一方、要素名を省略しなかった場合、指定した要素名の要素のうち、さらに、指定したクラス名に該当する要素のみが選択されます。

グループセレクタ

カンマ「,」でつなぐことで、複数のセレクタを一括して選択することができます（OR検索）。

h1, h2, h3 { color: red; }

子孫セレクタ

スペース「」で親の方から順に列挙していくことで、先頭から順に絞り込んでいくような選択が可能です（AND検索）。

例えば、

h1 .hi { color: red; }

のように指定した場合、h1要素内の「hi」クラスが指定された要素のみが選択されます。つまり、

 <h1>テスト<span class="hi">見出</span>し</h1>

は、「見出」のみが赤くなります。また、h1以外の「hi」クラスの要素には影響を及ぼしません。

別の例として、以下のようなHTML

<div id="contents">
    <h1>テスト<span class="hi">見出</span>し</h1>
</div>
<p>本<span class="hi">文</span>だよ！<p>

に対して、

#contents .hi{ color: red; }

のように指定した場合も、「見出」のみが赤くなり、divで囲われてい「hi」クラスの要素には影響を及ぼしません。

ユニバーサルセレクタ

「*」で、すべての要素を選択します。ブラウザデフォルトのmargin設定をクリアする際などに便利です。

表3:

*	すべての要素を選択する。

疑似クラス

疑似クラスを指定すると、一定の条件下にのみ、スタイルを適応することができます。セレクタの後に「:」で続けます。例えば「a:hover」のような感じです。以下に、よく使うものをまとめます。

表4: インタラクティブな振る舞い

:hover	要素にポインタが乗っている時
:active	要素がアクティブな時
:focus	要素にフォーカスしている時

表5: ユーザインタフェース関連

:enabled	入力可能な時
:disabled	入力が無効化されている時
:checked	選択された状態の時

表6: リンク関連

:link	未訪問のリンク
:visited	訪問済みのリンク

疑似要素

疑似要素を指定すると、要素内の指定した条件に該当する部分が疑似的に要素であるかのように選択することができます。セレクタの後に「::」で続けます。

表7: 疑似要素

::selection	ユーザが選択した領域
::first-line	要素の最初の一行
::first-letter	要素の最初の一文字
::before	要素内の先頭にコンテンツを追加（contentプロパティで追加するコンテンツを記述）
::after	要素内の末尾にコンテンツを追加（contentプロパティで追加するコンテンツを記述）

before、afterについてもう少し詳しく説明します。例えば以下のようなスタイルがあった場合、

h1::before{
    content: "★";
}
h1::after{
    content: "☆☆";
}

h1の要素の文字の前に「★」、あとに「☆☆」が追加されます。

属性セレクタ

要素についている属性をキーとして選択することができます。

表8: 属性セレクタ

要素[attr]	属性attrを持つ要素を選択します
要素[attr=”val”]	値がvalの属性attrを持つ要素を選択します
要素[attr*=”val”]	値がvalを含む属性attrを持つ要素を選択します
要素[attr^=”val”]	値がvalで始まる属性attrを持つ要素を選択します
要素[attr$=”val”]	値がvalで終わる属性attrを持つ要素を選択します