CSSセレクタの書き方

セレクタの種類

CSSで以下の記述があったとします。

h1 {
  color: red;
}

赤字部分がセレクタです。colorはプロパティ、redはその値、2つ合わせて宣言と呼びます。

セレクタで要素を特定し、そのスタイルを宣言で指定するという訳です。

以下は、セレクタの種類です。リンクをクリックすると、それぞれの説明にジャンプできます。

区分が基本となっているセレクタは、単独で使えます。結合用となっているものは、基本のセレクタを複数組み合わせて使います。

初めてCSSを使う方は、最低限として要素型セレクタ、IDセレクタ、クラスセレクタ、グループ化セレクタ、小孫結合子を覚えると良いと思います。かなりのケースに対応できます。

なお、h1要素やp要素などについては「HTMLの基本」、CSSについては「CSS/スタイルシートの基本」をご参照ください。

全称セレクタ

全称セレクタは、すべての要素を対象とします。

* {
  color: red;
}

上記のとおり、*(アスタリスク)で表記します。

以下は、HTMLへの適用例です。

<h1>赤字で表示されます。</h1>
<p>赤字で表示されます。</p>
<div>赤字で表示されます。</div>

上記のとおり、すべての要素の文字が赤字で表示されます。

要素型セレクタ

要素型セレクタは、h1などの要素を対象とします。

h1 {
  color: red;
}

以下は、HTMLへの適用例です。

<h1>赤字で表示されます。</h1>
<p>赤字で表示されません。</p>
<div>赤字で表示されません。</div>

上記のとおり、h1要素だけ赤字で表示されます。

pを指定すればp要素が赤に、divを指定すればdiv要素だけが赤で表示されます。

IDセレクタ

IDセレクタは、ID指定がある要素を対象とします。

#test {
  color: red;
}

上記のとおり、IDは#(シャープ)に続けて記述します。

以下は、HTMLへの適用例です。

<h1 id="test">赤字で表示されます。</h1>
<p>赤字で表示されません。</p>
<div>赤字で表示されません。</div>

上記のとおり、idでtestを指定した要素だけ赤字で表示されます。

クラスセレクタ

クラスセレクタは、クラス指定がある要素を対象とします。

.test {
  color: red;
}

上記のとおり、クラスは.(ドット)に続けて記載します。

以下は、HTMLへの適用例です。

<h1 class="test">赤字で表示されます。</h1>
<p class="test">赤字で表示されます。</p>
<div>赤字で表示されません。</div>

上記のとおり、クラスでtestを指定したh1要素とp要素が赤字で表示されます。

以下のように記述することもできます。

p.test {
  color: red;
}

これは、p要素でクラスが使われた時だけ有効になります。

以下は、HTMLへの適用例です。

<h1 class="test">赤字で表示されません。</h1>
<p class="test">赤字で表示されます。</p>
<p>赤字で表示されません。</p>

上記のとおり、クラスでtestを指定したp要素だけ赤字で表示されます。同じクラス名のtestを指定しても、h1要素は赤字になりません。

属性セレクタ

HTMLのタグに、付属で記述するものを属性と呼びます。リンクでaの後に記述するhrefも属性で、IDやクラスも属性です。

属性セレクタは、要素が特定の属性を持つ時だけ対象にできます。

h1[id] {
  color: red;
}

上記のとおり、属性を[](大括弧)でくくって記述します。

上記では、h1要素がid属性を持つ時だけ赤字で表示されます。

以下のように、属性の値まで指定できます。

a[href="page.html"] {
  color: red;
}

上記は、リンクで属性にhref="page.html"がある時だけ対象になります。

疑似クラス

例えば、マウスが上にある時など特定の状態にある要素を対象にしたい場合、疑似クラスを使ってセレクタを記述します。疑似クラスには、動的疑似クラスや構造疑似クラスなどがあります。

動的疑似クラス

動的疑似クラスは、訪問前と訪問後でリンクの色を変えたりできます。

以下は、動的疑似クラスの例です。

例えば、CSSで以下のように記述します。

a:hover {
  color: red;
}

HTMLで<a href="page.html">リンク先</a>と記述した場合、マウスが上にある時だけ赤字に変わります。

これは、本サイトでも色が変わるようにしているので、リンクがある所でマウスを上に乗せてみてください。

構造疑似クラス

構造疑似クラスは、要素の場所などでスタイルを変えたりできます。

以下は、構造疑似クラスの例です。

td要素は、表のデータを示しますが、以下のように記述すると最初の列(一番左側)だけ背景を水色にできます。

td:first-child {
  background-color: lightblue;
}

また、tr要素は表の行を示しますが、以下のように記述すると偶数行だけ背景を灰色にできます。

tr:nth-child(2n) {
  background-color: grey;
}

奇数行を指定する場合は、tr:nth-child(2n+1)と記述します。

疑似要素

疑似要素は、要素全体ではなく、要素内の先頭行だけ赤字にするなど特定の場所を対象にしたい時に使います。

以下は、疑似要素の例です。

以下は、first-lineの利用例です。

p::first-line {
  color: red;
}

上記では、段落(p要素)の1行目だけが赤字になります。もし、ブラウザの幅が変わって1行目の文字数が多くなったり少なくなったりしても、1行目だけが赤字で表示されます。

次は、beforeの利用例です。

p::before {
  content: "注意:";
}

上記により、p要素で記述した文字の前に「注意:」が追加されます。

グループ化セレクタ

グループ化セレクタは、複数の要素に同じスタイルを適用する時に使います。

h1, p {
  color: red;
}

上記のとおり、2つのセレクタを,(カンマ)で区切って記載します。

以下は、HTMLへの適用例です。

<h1>赤字で表示されます。</h1>
<p>赤字で表示されます。</p>
<div>赤字で表示されません。</div>

上記のとおり、h1要素もp要素も文字が赤字で表示されます。

グループ化セレクタは、3つ以上のセレクタ(例:div, p, li)も記述できます。

小孫結合子

div要素の中にspan要素が定義されていたとします。いわゆる、ネスト(入れ子)の状態です。この場合、div要素を親要素、span要素を子要素と言います。

小孫結合子は、divが親要素、spanが子要素の時だけスタイルを反映したいといった時に使います。

div span {
  color: red;
}

上記のとおり、2つのセレクタを小孫結合子のスペースで区切って記述します。

なお、span要素は特に何も意味しませんが、その部分だけ赤字にしたいなど、スタイルを一時的に変えたい時に使います。

以下は、HTMLへの適用例です。

<div>
<span>赤字で表示されます。</span>
</div>
<span>赤字で表示されません。</span>

上記のとおり、divが親要素の時だけspan要素の文字が赤字になります。最後の行のように、親要素がdivでない場合は赤字になりません。

子要素の中に子要素が定義されると、孫要素と呼ばれます。以下のように、span要素が孫要素の場合でも赤字になります。

<div>
<p>赤字になりません。<span>赤字になります。</span></p>
</div>

小孫結合子は、3つ以上のセレクタ(例:div p spanなど)を記述して、孫要素以下にだけ適用させることもできます。

子結合子

子結合子は、子要素だけを対象にして孫要素は対象にしません。

div > span {
  color: red;
}

上記のとおり、2つのセレクタを子結合子の>(大なり記号)で区切って記述します。

以下は、HTMLへの適用例です。

<div>
<span>赤字になります。</span>
<p>赤字になりません。<span>赤字になりません。</span></p>
</div>

divが親要素で、spanが子要素の時だけ赤字になります。pが子要素では赤字になりませんし、spanが孫要素でも赤字になりません。

子結合子は、3つ以上のセレクタ(例:div > p > span)を記述して孫要素を対象にすることもできます。

隣接兄弟結合子

隣接兄弟結合子は、同じ階層にある次の要素だけを対象にします。

h1 + p {
  color: red;
}

上記のとおり、2つのセレクタを隣接兄弟結合子の+(プラス記号)で区切って記述します。

上記により、h1のすぐ次のp要素だけ赤字で表示されます。

以下は、HTMLへの適用例です。

<h1>タイトル</h1>
<p>赤字になります。</p>
<p>赤字になりません。</p>

上記で、赤字で示したp要素だけが対象です。

例えば、h1要素の下にp要素がある時だけ間隔を取りたい(h1要素とp要素の間隔を開けたい)、p要素のすぐ下に画像がある時だけ画像の上に間隔を取りたい時などに使えます。

後続兄弟結合子

後続兄弟結合子は、同じ階層にある後続すべての要素を対象にします。

h1 ~ p {
  color: red;
}

上記のとおり、2つのセレクタを後続兄弟結合子の~(チルダ)で区切って記載します。

上記により、h1以降のp要素すべてが赤字で表示されます。

以下は、HTMLへの適用例です。

<h1>タイトル</h1>
<p>赤字になります。</p>
<p>赤字になります。</p>
<span>赤字になりません。</span>

上記で、赤字で示したp要素すべてが対象です。span要素は、対象になりません。

以下のように、階層が違う場合は対象になりません。

<h1>タイトル</h1>
<p>赤字になります</p>
<div><p>赤字になりません</p></div>

赤字になりませんと記載したp要素が対象にならないのは、div要素の子要素となっていてh1要素と階層が違うためです。

組み合わせ例

セレクタを結合子などで組み合わせて利用する例です。以下は、IDとクラスを小孫結合子で組み合わせています。

#id-test .class-test {
  color: red;
}

上記は、親要素のIDがid-testで、小孫要素のクラスがclass-testの時に適用されます。

以下は、IDと疑似クラスを小孫結合子で組み合わせた例です。

#id-test a:hover {
  color: red;
}

上記は、親要素のIDがid-testの時だけ、リンクの上にマウスをのせると色が赤になります。

以下は、小孫結合子とグループ化を組み合わせた例です。

div p, div span {
  color: red;
}

上記は、親要素がdivで小孫要素がpとspanの時に適用されます。

以下は、疑似クラスと小孫結合子を組み合わせた例です。

.test tr:nth-child(2n) {
  background-color: grey;
}

上記は、親要素(例：table)でクラスをtestとしている時だけ偶数行の背景が灰色になります。