CSSセレクタの書き方

CSSセレクタを使うと、スタイルを適用する要素の条件を指定することができます。CSSセレクタの一覧とその使い方をご紹介します。

パターンマッチング

ある条件に合致した要素に対してスタイルシートを適用することができる。これをセレクタと呼ぶ。その指定形式を次に示す。

pattern { attribute-list }

pattern: パターンマッチングを指定する。
attribute-list: 属性のリストを指定する。属性のリストとは、ひとつの属性か、セミコロン記号で区切られた複数の属性である。

パターンをカンマで区切って複数指定することもできる。この場合、指定したパターンのいずれかにマッチすればスタイルシート属性が適用される。

pattern1, pattern2, pattern3 { attribute-list }

カンマが無く、空白で区切ってしまうと、子孫セレクタになってしまうので注意が必要である。

ユニバーサルセレクタ

すべての要素にマッチするパターン。

パターン	説明
*	すべての要素にマッチする。

すべての要素タイプを対象とするセレクタをユニバーサルセレクタと呼ぶ。

なお、要素タイプに条件を加える場合には、* を省略できる。つまり、*.classは.classと同等である。また、*#idは#idと同等である。

タイプセレクタ

要素 E にマッチするセレクタ。

タイプセレクタ
Pattern	Description
`element`	要素タイプ名(タグ名)が`element`で指定した値に一致する要素
`element1` , `element2`	要素タイプ名(タグ名)が`element1`で指定した値又は`element2`で指定した値に一致する要素

すべてのh2要素に対してスタイルを定義する例を示す。

h2 { font-size: xx-large }

h2要素、h3要素及びh4要素に対してスタイルを定義する例を次に示す。

h2, h3, h4 { color: red }

子孫セレクタ

パターン	説明
`ancestor` `descendant`	要素 `ancestor` の子孫である要素 `descendant` にマッチする。

span要素がdiv要素の子孫であれば赤く表示する例を次に示す。

<html>
  <head>
    <style>
      div span { color: red; }
    </style>
  </head>
  <body>
    <div>
      <span>descendant1</span>
      <p>
        <span>descendant2</span>
      </p>
    </div>
    <p>
      <span>descendant3</span>
    </p>
  </body>
</html>

上記の表示例を次に示す。

descendant1

descendant2

descendant3

子セレクタ

パターン	説明
`parent` > `child`	要素 `parent` の子供である要素 `child` にマッチする。

span要素がdiv要素の子供であれば赤く表示する例を次に示す。

<html>
  <head>
    <style>
      div > span { color: red; }
    </style>
  </head>
  <body>
    <div>
      <span>child1</span>
      <p>
        <span>child2</span>
      </p>
    </div>
    <p>
      <span>child3</span>
    </p>
  </body>
</html>

上記の表示例を次に示す。

child1

child2

隣接兄弟セレクタ

`E + F`

要素 E の直後に要素 F が続き、親が共通の場合、要素 F にマッチする。要素 E と要素 F の間に別の要素が存在する場合はマッチしない。ただし、要素 E と要素 F の間には、タグ無しテキストやコメントがあっても構わない。

隣接兄弟セレクタを用いたスタイルシートの例を次に示す。

div + p { color:red; }

上記の隣接兄弟セレクタは、次に示すHTMLのp要素にマッチして、p要素が赤く表示される。

<div>兄</div>
<p>弟</p>

しかし、次に示すHTMLでは、div要素とp要素の間にblockquote要素があるのでマッチしない。

<div>兄</div>
<blockquote>次男</blockquote>
<p>三男</p>

次に示すHTMLでは、親が共通でない（兄弟ではなく親子）であるため、マッチしない。

<div>親
  <p>子</p>
</div>

属性セレクタ

パターン	説明
`E`[`A`]	要素 `E` の属性 `A` に値が設定されていれば、マッチする。属性 `A` の値は、どんな値でもよい。
`E`[`A`="`V`"]	属性 `A` の値が `V` である要素タイプ `E` にマッチする。
`E`[`A`~="`V`"]	要素 `E` の属性 `A` の値が、空白で区切られた複数の値のリストであり、そのいずれかの値が `V` であれば、マッチする。
`E`[lang\|="`V`"]	lang属性が `V`- で始まる値である要素タイプ `E` にマッチする。

`E`[`A`]

要素 E の属性 A に値が設定されていれば、マッチする。属性 A の値は、どんな値でもよい。

使用例と表示サンプル

div要素のtitle属性に何らかの値が設定されていれば、テキストを赤色で表示する例を次に示す。

<html>
  <head>
    <style>
      div[title] { color: red }
    </style>
  </head>
  <body>
    <div>sample</div>
    <div title="foo">sample</div>
    <div title="bar">sample</div>
  </body>
</html>

上記の表示例を次に示す。

sample

`E`[`A`="`V`"]

要素 E の属性 A の値が V であれば、マッチする。

使用例と表示サンプル

span要素のtitle属性の値がspan1であれば、テキストを赤色で表示するスタイルシートの例を示す。

<html>
  <head>
    <style>
      span[title="span1"] { color: red; }
    </style>
  </head>
  <body>
    <p>
      <span title="span1">span1</span> <span title="span1 span2">span1-span2</span> <span title="span2">span2</span>
    </p>
  </body>
</html>

title属性の値がspan1でないspan要素は、テキストが赤色で表示されない。

span1 span1-span2 span2

element[attirbute~="value"]

要素 E の属性 A の値が、空白で区切られた複数の値のリストであり、そのいずれかの値が V であれば、マッチするパターン。

<html>
  <head>
    <style>
      span[title~="span3"] { color: red; }
    </style>
  </head>
  <body>
    <p>
      <span title="span3">span3</span> <span title="span3 span4">span3-span4</span> <span title="span5">span5</span>
    </p>
  </body>
</html>

上記の表事例を次に示す。

span3 span3-span4 span5

element[lang|="value"]

lang属性が value で始まる値である要素タイプ element にマッチする。たとえば、パターン p[lang|="en"] は、lang属性の値が "en-US" や "en-UK" であるp要素タイプにマッチする。

p要素のlang属性が「en-」で始まる値であれば赤く表示する例を次に示す。

<html>
  <head>
    <style>
      p[lang|="en"] { color: red }
    </style>
  </head>
  <body>
    <p lang="ja-JP">Japan</p>
    <p lang="en-GB">United Kingdom</p>
    <p lang="en-US">United States of America</p>
  </body>
</html>

上記の表示例を次に示す。

Japan

United Kingdom

United States of America

クラスセレクタ

パターン	説明
*.`class`	クラス名が `class` である要素にマッチする。
.`class`	*.`class` と同じ。
`E`.`class`	クラス名が `class` である要素 `E` にマッチする。

スタイルシートの定義に任意の名前を付けることができます。これをクラスと言います。クラスを定義する際は、クラスの定義であることを表すために必ずピリオド記号から始めます。

赤い大きな文字にするスタイル定義に notice というクラス名を付ける例を次に示します。

.notice {
  font-color: red;
  font-size: large;
}

この notice クラスを使用するには、HTML要素のclass属性にクラス名を指定します。

<span class="notice">sample</span>

<p class="notice">sample</p>

特定の要素に対してクラスを定義することもできます。特定の要素に対してクラスを定義するには、「要素名.クラス名」の形式で定義します。

h2.notice {
  font-color: red;
  font-size: large;
}

h2要素に対して定義したクラスは、h2要素のclass属性から指定できます。他の要素のclass属性では指定できません。

<h2 class="notice">重要なお知らせ</h2>

ある特定のクラス内の要素に対してスタイルシートを指定するには、クラス名と要素タイプ名を半角スペースで区切ってスタイルシートを指定します。

例えば、 <div class="navi"> と </div> の間に存在するA要素タイプに対してスタイルシートを指定するには、次のようにします。

.navi a { color: red }

A要素タイプでも navi クラス内にあるか否かで上記スタイルシートが適用されるかどうかが決まります。

疑似クラスセレクタ

疑似クラスとは、特定の状態や条件を表わすもので、要素セレクタと組み合わせて使う。

要素	疑似クラス	説明
a	`active`	クリックされたときのリンク
a	`hover`	マウスカーソルが乗せられたリンク
任意	`:first-child`	最初の子要素
	`:focus`	フォーカスを得た要素
	`:link`	まだ訪れていないURLを指し示すリンク
	`:nth-of-type()`	兄弟要素のうち指定した位置のもの
	`:visited`	既に訪れたことがあるURLを指し示すリンク

:first-child

:first-child は、親の最初の子供である要素を表す擬似クラスである。

要素が、その親の最初の子供である場合にマッチする。

使用例と表示サンプル

p要素が、その親要素の最初の子要素である場合に適用するスタイルシートを指定する例を示す。

p:first-child { color: red }

親要素divが2つの子要素（p要素）を持つHTMLの例を示す。

<div>
  <p>最初の段落だけ赤くなります。</p>
  <p>以降の段落は赤くなりません。</p>
</div>

最初の段落だけ赤くなります。

以降の段落は赤くなりません。

:lang(lang)

:lang(lang) は、言語が lang である要素を表す擬似クラスである。

:last-child

:last-child は、親の最後の子供である要素を表す擬似クラスである。

<link>

スタイルシートを外部ファイルで定義した場合は、HTMLの LINK要素タイプでその外部ファイルのスタイルシートを参照するように指定します。

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
  </head>
</html>

外部ファイル stylesheet.css の中でスタイルシートの定義を行います。

h2 {
  font-size: large;
  color: red;
}

もし要素がハイパーリンクのアンカーであり、かつ、そのハイパーリンクのターゲットにまだ訪れていなければ、その要素にマッチするパターン。

使用例と表示サンプル

a:link { color: gray }

資産運用のすゝめ

:link は、ハイパーリンクのアンカーであり、かつ、そのハイパーリンクのターゲットにまだ訪れていない要素を表す擬似クラスである。

擬似クラスは次の順番で指定する必要がある。

:link
:visited
:hover
:active

:nth-of-type()

CSS の :nth-of-type 疑似クラスは、兄弟要素グループのうち指定した位置にある要素にマッチするセレクタである。

element:nth-of-type(position)

element

要素タイプを指定する。

position

位置を次の形式で指定する。

値	説明
`a`n	`a`番目ごと（n = 0, 1, 2, ...）
`a`n+`b`	`a` + b番目ごと（n = 0, 1, 2, ...）
odd	奇数
even	偶数

表の奇数行に背景色を設定する例を以下に示す。

<head>
  <style>
    table.odd tr:nth-of-type(odd) {
      background-color: silver;
    }
  </style>
</head>
<body>
  <table class="odd">
    <thead>
      <tr>
        <th>金融機関コード</th>
        <th>金融機関</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>0001</td>
        <td>みずほ銀行</td>
      </tr>
      <tr>
        <td>0005</td>
        <td>三菱UFJ銀行</td>
      </tr>
      <tr>
        <td>0009</td>
        <td>三井住友銀行</td>
      </tr>
      <tr>
        <td>0010</td>
        <td>りそな銀行</td>
      </tr>
    </tbody>
  </table>
</body>

表の場合、thead と tbody はそれぞれ別に行番号がカウントされる。

金融機関コード	金融機関
0001	みずほ銀行
0005	三菱UFJ銀行
0009	三井住友銀行
0010	りそな銀行

表の偶数行に背景色を設定する例を以下に示す。

<head>
  <style>
    table.even tr:nth-of-type(even) {
      background-color: silver;
    }
  </style>
</head>
<body>
  <table class="even">
    <thead>
      <tr>
        <th>金融機関コード</th>
        <th>金融機関</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>0001</td>
        <td>みずほ銀行</td>
      </tr>
      <tr>
        <td>0005</td>
        <td>三菱UFJ銀行</td>
      </tr>
      <tr>
        <td>0009</td>
        <td>三井住友銀行</td>
      </tr>
      <tr>
        <td>0010</td>
        <td>りそな銀行</td>
      </tr>
    </tbody>
  </table>
</body>

表の場合、thead と tbody はそれぞれ別に行番号がカウントされる。

金融機関コード	金融機関
0001	みずほ銀行
0005	三菱UFJ銀行
0009	三井住友銀行
0010	りそな銀行

/* 最初のリスト項目 */
li:nth-of-type(1) {
  font-weight: bold;
}

/* 偶数のリスト項目 */
li:nth-of-type(2n) {
  color: blue;
}

/* 奇数のリスト項目 */
li:nth-of-type(2n+1) {
  color: red;
}

<ol>
  <li>first list item</li>
  <li>second list item</li>
  <li>third list item</li>
  <li>4th list item</li>
</ol>

first list item
second list item
third list item
4th list item

:root

:root 疑似クラスは、HTMLツリーのルート要素であるhtml要素を選択するセレクタです。つまり、html 要素セレクタと同じです。

おもに、グローバルのCSS変数を宣言するのに使われます。

:root {
  /* 変数の宣言 */
  --color-primary: blue;
}

:visited

:visited は、ハイパーリンクのアンカーであり、かつ、そのハイパーリンクのターゲットへ既に訪れている要素を表す擬似クラスである。

もし要素がハイパーリンクのアンカーであり、かつ、そのハイパーリンクのターゲットへ既に訪れていれば、その要素にマッチするパターン。

使用例と表示サンプル

a:visited { color: green }

CSSセレクタの書き方

a:hover

a:hover は、ホバーになった要素を表す擬似クラスである。

a要素がホバー状態のときにマッチするパターン。アンカーをマウスでポイントしたときに適用するスタイルシートを指定する。

使用例

<a> と </a> に囲まれた文字列（アンカー）の上にマウスカーソルを乗せたときにのみ適用するスタイルを指定できます。

定義済みクラス a:hover の使用例と表示サンプルを示します。表示結果はブラウザによって異なることがあります。

a:hover { color: red; }

<a href="#a_hover">マウスのカーソルを乗せると赤くなります</a>

マウスのカーソルを乗せると赤くなります

a:active

a:active はアクティブになっているリンクを表す擬似クラスである。a要素がアクティブな状態のときにマッチする。アンカーをクリックしたときに適用するスタイルシートを指定する。

使用例

<a> と </a> に囲まれた文字列（アンカー）をマウスでクリックされたとき、またはTABキーでフォーカスを移動したときにのみ適用するスタイルを指定できます。

定義済みクラス a:active の使用例と表示サンプルを示します。表示結果はブラウザによって異なることがあります。

a:active { font-size: xx-large; }

<a href="#a_active">クリックすると大きくなります</a>

クリックすると大きくなります

:focus

:focus は、フォーカスを得た要素を表す擬似クラスである。

要素 E がフォーカスを得た場合にマッチするパターン。

:focus

element:focus

:empty

:empty疑似クラスは子を持たない要素を表す。たとえば、次のような要素である。

<p></p>

:not()

最初の子要素以外

li:not(:first-child) {
  padding-top: 1rem;
}

最後の子要素以外

li:not(:last-child) {
  padding-bottom: 1rem;
}

IDセレクタ

IDセレクタとは、指定したIDにマッチするセレクタである。HTMLにおいてIDはユニークなものであるので、特定の要素にのみマッチする。

[element]#id

element

要素タイプを指定する。全ての要素タイプにマッチするユニバーサルセレクタ「*」を指定することもできる。

/* <div id="example1"> にマッチ */
div#example1 {
  /* properties */
}

/* id="example2" にマッチ */
*#example2 {
  /* properties */
}

#id

ID（識別子）を指定する。

/* id="example" にマッチ */
#example {
  /* properties */
}

下記のように、同じIDが複数存在するのは間違ったHTMLである。

<div id="id1">element1</div>
<div id="id1">element1</div>

パターン	説明
*#`id`	IDが `id` である要素にマッチする。
#`id`	*#`id`と同じ。
`E`#`id`	IDが `id` である要素 `E` にマッチする。

スタイルシート定義にIDを付けることができます。IDを定義する際は、IDの定義であることを表すためにシャープ記号からはじめます。

#id001 { color: red }

IDを付けたスタイルを使用するには、HTML要素のid属性に指定します。クラスと異なり、ひとつのHTMLドキュメント中に複数の要素が同じIDを持つことはできません。

<span id="id001">sample</span>

参考文献

World Wide Web Consortium (2018) Selectors Level 3

CSSセレクタの書き方

パターンマッチング

ユニバーサルセレクタ

タイプセレクタ

子孫セレクタ

子セレクタ

隣接兄弟セレクタ

E + F

属性セレクタ

E[A]

使用例と表示サンプル

E[A="V"]

使用例と表示サンプル

element[attirbute~="value"]

element[lang|="value"]

クラスセレクタ

疑似クラスセレクタ

:first-child

使用例と表示サンプル

:lang(lang)

:last-child

<link>

使用例と表示サンプル

:nth-of-type()

:root

:visited

使用例と表示サンプル

a:hover

使用例

a:active

使用例

:focus

:empty

:not()

IDセレクタ

参考文献

`E + F`

`E`[`A`]

`E`[`A`="`V`"]