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

HTML要素の id と class

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

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

 

基本的なセレクタ

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

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

 

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

グループセレクタ

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

子孫セレクタ

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

例えば、 h1 .hi { color: red; }のように指定した場合、h1要素内の「hi」クラスが指定された要素のみが選択されます。つまり、 <h1>テスト<span class="hi">見出</span></h1> は、「見出」のみが赤くなります。また、h1以外の「hi」クラスの要素には影響を及ぼしません。

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

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

ユニバーサルセレクタ

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

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

 

疑似クラス

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

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

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

ユーザインタフェース関連

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

リンク関連

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

疑似要素

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

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

 

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

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

属性セレクタ

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

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