CSSセレクタの書き方

 CSSのセレクタには、種類があります。

 本ページでは、セレクタの書き方について説明しています。

セレクタの種類

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

【CSSルールセット】
h1 {
  color: red;
}

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

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

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

【セレクタの種類】
区分 セレクタの種類 説明 記述例
基本 全称セレクタ すべての要素を対象にします。 *
要素型セレクタ h1のようなタグで記述する要素を対象にします。 h1
IDセレクタ ID指定した要素を対象にします。 #test
クラスセレクタ クラス指定した要素を対象にします。 .test
属性セレクタ 指定した属性を持つ要素を対象にします。 h1[id]
疑似クラス マウスが上にある時や最初の要素など特定状態の要素を対象にします。 a:hover
疑似要素 最初の行や文字など、要素内の特定の場所を対象にします。 p::first-line
結合用 グループ化セレクタ 複数の要素をまとめて(グループにして)対象にします。 h1, p
小孫結合子 特定の親要素を持つ子要素や孫要素を対象にします。 div p
子結合子 特定の親要素を持つ子要素だけを対象にします。 div > p
隣接兄弟結合子 同じ階層にある次の要素を対象にします。 h1 + p
後続兄弟結合子 同じ階層にある後続すべての要素を対象にします。 h1 ~ p

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

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

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

全称セレクタ

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

【全称セレクタの利用例】
* {
  color: red;
}

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

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

【HTMLへの適用例】
<h1>赤字で表示されます。</h1>
<p>赤字で表示されます。</p>
<div>赤字で表示されます。</div>

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

要素型セレクタ

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

【要素型セレクタの利用例】
h1 {
  color: red;
}

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

【HTMLへの適用例】
<h1>赤字で表示されます。</h1>
<p>赤字で表示されません。</p>
<div>赤字で表示されません。</div>

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

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

IDセレクタ

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

【IDセレクタの利用例】
#test {
  color: red;
}

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

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

【HTMLへの適用例】
<h1 id="test">赤字で表示されます。</h1>
<p>赤字で表示されません。</p>
<div>赤字で表示されません。</div>

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

クラスセレクタ

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

【クラスセレクタの利用例】
.test {
  color: red;
}

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

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

【HTMLへの適用例】
<h1 class="test">赤字で表示されます。</h1>
<p class="test">赤字で表示されます。</p>
<div>赤字で表示されません。</div>

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

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

【特定要素を対象とするクラスセレクタ】
p.test {
  color: red;
}

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

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

【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"がある時だけ対象になります。

疑似クラス

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

動的疑似クラス

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

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

【動的疑似クラスの種類】
動的疑似クラスの種類 説明 記述例
:link 未訪問のリンク a:link
:visited 訪問済のリンク a:visited
:hover マウスが対象要素の上にある時など a:hover
:active マウスをクリックした時など a:active

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

【動的疑似クラスの利用例】
a:hover {
  color: red;
}

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

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

構造疑似クラス

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

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

【構造疑似クラスの種類】
構造疑似クラスの種類 説明 記述例
:first-child 最初の要素 li:first-child
:last-child 最後の要素 li:last-child
:nth-child() n番目の要素 tr:nth-child(2n)

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

【:first-childの使い方】
td:first-child {
  background-color: lightblue;
}

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

【:nth-child()の使い方】
tr:nth-child(2n) {
  background-color: grey;
}

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

疑似要素

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

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

【疑似要素の種類】
疑似要素の種類 説明 記述例
::first-line 最初の行 p::first-line
::first-letter 最初の文字 p::first-letter
::before 要素の最初 p::before
::after 要素の最後 p::after

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

【first-lineの利用例】
p::first-line {
  color: red;
}

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

 次は、beforeの利用例です。

【beforeの利用例】
p::before {
  content: "注意:";
}

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

グループ化セレクタ

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

【グループ化セレクタの利用例】
h1, p {
  color: red;
}

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

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

【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への適用例です。

【HTMLへの適用例】
<div>
<span>赤字で表示されます。</span>
</div>
<span>赤字で表示されません。</span>

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

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

【HTMLへの適用例】
<div>
<p>赤字になりません。<span>赤字になります。</span></p>
</div>

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

子結合子

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

【子結合子の利用例】
div > span {
  color: red;
}

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

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

【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への適用例です。

【隣接兄弟結合子を使ったHTML】
<h1>タイトル</h1>
<p>赤字になります。</p>
<p>赤字になりません。</p>

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

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

後続兄弟結合子

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

【後続兄弟結合子の利用例】
h1 ~ p {
  color: red;
}

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

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

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

【後続兄弟結合子を使ったHTML】
<h1>タイトル</h1>
<p>赤字になります。</p>
<p>赤字になります。</p>
<span>赤字になりません。</span>

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

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

【後続兄弟セレクタは階層が違うと対象にならない】
<h1>タイトル</h1>
<p>赤字になります</p>
<div><p>赤字になりません</p></div>

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

組み合わせ例

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

【IDとクラスを小孫結合子で組み合わせた例】
#id-test .class-test {
  color: red;
}

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

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

【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としている時だけ偶数行の背景が灰色になります。

サイト内で関連ページをチェック

ホームページ作成「CSS/スタイルシートの基本