２　CSS の書式

（１） * （すべての要素）

すべての要素が対象になります。

記述例

スタイルシート
  *{color:blue;}

ボディ
<h3>はじまり</h3>
<p>私たちが初めて会ったのは、<time datetime="2001-01-07">21世紀に入った最初の日曜日</time>だった。</p>
<p>デジタル時計は、ちょうど<time>16:00</time>を表示していた。</p>

全ての文字が青になります。

（２） E

E 要素のみが対象になります。

記述例

スタイルシート
  time{color:blue;}

ボディ
<h3>はじまり</h3>
<p>私たちが初めて会ったのは、<time datetime="2001-01-07">21世紀に入った最初の日曜日</time>だった。</p>
<p>デジタル時計は、ちょうど<time>16:00</time>を表示していた。</p>

time 要素の文字色が青になります。

（３） E.class

指定されたクラス名が値の class 属性を持つすべての E 要素が対象になります。要素（タグ）名なしの .class ではすべての要素が対象になります。

記述例

スタイルシート
  p.notice{color:blue;}

ボディ
<h3>はじまり</h3>
<p class="notice">私たちが初めて会ったのは、<time datetime="2001-01-07">21世紀に入った最初の日曜日</time>だった。</p>
<p>デジタル時計は、ちょうど<time class="notice">16:00</time>を表示していた。</p>

p 要素の内クラス名の一致するものだけが、文字色が青になります。

time 要素も同じクラス名がありますが、文字色は青にはなりません（time 要素の notice クラスの定義はないので間違った記述です）。

（４） E#ID

指定された ID の要素が対象になります。ID はひとつの文書内で重複して付けられませんので、要素（タグ）名なしの #ID でも同じです。

記述例

スタイルシート
  p#bb{color:blue;}

ボディ
<h3>はじまり</h3>
<p id="aa">私たちが初めて会ったのは、<time datetime="2001-01-07">21世紀に入った最初の日曜日</time>だった。</p>
<p id="bb">デジタル時計は、ちょうど<time>16:00</time>を表示していた。</p>

ID の一致する要素の文字色が青になります。

この例ではスタイルシートで要素名も p と指定されていますので、もし h3 要素に bb という ID が付けられていたとしても、文字色は青にはなりません。

（５） E[attr]

attr 属性を持つ E 要素が対象になります。

記述例

スタイルシート
  time[datetime]{color:blue;}

ボディ
<p>私たちが初めて会ったのは、<time datetime="2001-01-07">21世紀に入った最初の日曜日</time>だった。</p>
<p>デジタル時計は、ちょうど<time>16:00</time>を表示していた。</p>

datetime 属性を持つ time 要素の文字色が青になります。

（６） E[attr="val"]

attr 属性の値が val である E 要素が対象になります。

記述例

スタイルシート
  time[datetime="2001-01-07"]{color:blue;}

ボディ
<p>私たちが初めて会ったのは、<time datetime="2001-01-07">21世紀に入った最初の日曜日</time>だった。</p>
<p>デジタル時計は、ちょうど<time datetime="2001-01-07 16:00">16:00</time>を表示していた。</p>

属性値が "2001-01-07" の datetime 属性を持つ time 要素の文字色が青になります。

（７） E[attr~="val"]

属性値の一つが val である attr 属性を持つ E 要素が対象になります。

記述例

スタイルシート
  time[datetime~="16:00"]{color:blue;}

ボディ
<p>私たちが初めて会ったのは、<time datetime="2001-01-07">21世紀に入った最初の日曜日</time>だった。</p>
<p>デジタル時計は、ちょうど<time datetime="2001-01-07 16:00">16:00</time>を表示していた。</p>

属性値の一部が "16:00" である datetime 属性を持つ time 要素の文字色が青になります。

（８） E[attr^="str"]

属性値が str で始まる attr 属性を持つ E 要素が対象になります。

記述例

スタイルシート
  time[datetime^="2"]{color:blue;}

ボディ
<p>私たちが初めて会ったのは、<time datetime="2001-01-07">21世紀に入った最初の日曜日</time>だった。</p>
<p>デジタル時計は、ちょうど<time datetime="2001-01-07 16:00">16:00</time>を表示していた。</p>

属性値が "2" で始まる datetime 属性を持つ time 要素の文字色が青になります。

（９） E[attr$="str"]

属性値が str で終わる attr 属性を持つ E 要素が対象になります。

記述例

スタイルシート
  time[datetime$="00"]{color:blue;}

ボディ
<p>私たちが初めて会ったのは、<time datetime="2001-01-07">21世紀に入った最初の日曜日</time>だった。</p>
<p>デジタル時計は、ちょうど<time datetime="2001-01-07 16:00">16:00</time>を表示していた。</p>

属性値が "00" で終わる datetime 属性を持つ time 要素の文字色が青になります。

（１０） E[attr*="str"]

属性値に str を含む attr 属性を持つ E 要素が対象になります。

記述例

スタイルシート
  time[datetime*="07"]{color:blue;}

ボディ
<p>私たちが初めて会ったのは、<time datetime="2001-01-07">21世紀に入った最初の日曜日</time>だった。</p>
<p>デジタル時計は、ちょうど<time datetime="2001-01-07 16:00">16:00</time>を表示していた。</p>

属性値が "07" を含む datetime 属性を持つ time 要素の文字色が青になります。

（１１） E[attr|="str"]

属性値が str か、str- で始まる attr 属性を持つ E 要素が対象になります。

記述例

スタイルシート
  time[datetime|="2001-01"]{color:blue;}

ボディ
<p>私たちが初めて会ったのは、<time datetime="2001-01-07">21世紀に入った最初の日曜日</time>だった。</p>
<p>デジタル時計は、ちょうど<time datetime="2001-01-07 16:00">16:00</time>を表示していた。</p>

属性値が "2001-01" で始まる datetime 属性を持つ time 要素の文字色が青になります。

（１２） :root

文書のルート要素が対象になります。HTML文書の場合、常に html 要素となります。

記述例

スタイルシート
  :root{color:blue;}

ボディ
<table border="1">
 <tr><th>&nbsp;</th><th>県名</th><th>県庁所在地</th><th>面積（km<sup>2</sup>)</th></tr>
 <tr><th rowspan="4">四国</th><td>香川県</td><td>高松</td><td>1,876.53</td></tr>
 <tr><td>徳島県</td><td>徳島</td><td>4,146.67</td></tr>
 <tr><td>愛媛県</td><td>松山</td><td>5,678.18</td></tr>
 <tr><td>高知県</td><td>高知</td><td>7,105.16</td></tr>
</table>

html 要素（つまり、すべて）の文字の色が青になります。

では、線にも色が付くようです。

（１３） E:empty

内容が空である E 要素が対象になります。

記述例

スタイルシート
  td:empty{background-color:yellow;}

ボディ
<table border="1">
 <tr><th>&nbsp;</th><th>県名</th><th>県庁所在地</th><th>面積（km<sup>2</sup>)</th></tr>
 <tr><th rowspan="4">四国</th><td>香川県</td><td></td><td>1,876.53</td></tr>
 <tr><td>徳島県</td><td>徳島</td><td></td></tr>
 <tr><td></td><td>松山</td><td>5,678.18</td></tr>
 <tr><td>高知県</td><td>高知</td><td>7,105.16</td></tr>
</table>

<td>～</td> の内容に記述がない部分の背景色が黄色になります。

（１４） E:nth-child(N)

親要素から見て、N 番目の子要素が E 要素のとき対象になります。N 番目の E 要素ではありません。N には次のようなものが指定できます。

ただし、最初の要素が１番目ですので注意してください。

また、nth-child(N) の対象はあくまで前から N 番目の子要素です。.class、#ID、[attr] などが指定されていたとしても、それらによって絞り込まれた子要素の前から数えた N 番目ではありません。

記述例

スタイルシート
  tr:nth-child(even){color:blue;}
  td:nth-child(1){background-color:yellow;}
  td.x:nth-child(2){background-color:pink;}

ボディ
<table border="1">
 <tr><th>&nbsp;</th><th>県名</th><th>県庁所在地</th><th>面積（km<sup>2</sup>)</th></tr>
 <tr><th rowspan="4">四国</th><td>香川県</td><td>高松</td><td>1,876.53</td></tr>
 <tr><td>徳島県</td><td class="x">徳島</td><td>4,146.67</td></tr>
 <tr><td>愛媛県</td><td>松山</td><td>5,678.18</td></tr>
 <tr><td>高知県</td><td class="x">高知</td><td class="x">7,105.16</td></tr>
</table>

偶数番目の要素が tr のとき文字色が青になります（"四国" は２行目にあるカラムなので青になります）。また、各行の１番目の要素が td のとき背景色が黄色になります（１～２行目は１番目の要素が th なので、背景色は変わりません）。

３つ目の例は注意が必要です。td.x:nth-child(2) は、class="x" が記述された td 要素の、前から２番目が対象ではありません。２番目の子要素が td 要素に class="x" が記述されていた場合が対象になります。

（１５） E:nth-last-child(N)

親要素から見て、後ろから N 番目の子要素が E 要素のとき対象になります。後ろから N 番目の E 要素ではありません。N には次のようなものが指定できます。

ただし、最初の要素が１番目ですので注意してください。

また、nth-last-child(N) の対象はあくまで後ろから N 番目の子要素です。.class、#ID、[attr] などが指定されていたとしても、それらによって絞り込まれた子要素の後ろから数えた N 番目ではありません。

記述例

スタイルシート
  tr:nth-last-child(odd){background-color:yellow;}
  td:nth-last-child(3){color:blue;}
  td.x:nth-last-child(2){background-color:pink;}

ボディ
<table border="1">
 <tr><th>&nbsp;</th><th>県名</th><th>県庁所在地</th><th>面積（km<sup>2</sup>)</th></tr>
 <tr><td rowspan="4">四国</td><td>香川県</td><td>高松</td><td>1,876.53</td></tr>
 <tr><td>徳島県</td><td>徳島</td><td class="x">4,146.67</td></tr>
 <tr><td>愛媛県</td><td>松山</td><td>5,678.18</td></tr>
 <tr><td class="x">高知県</td><td class="x">高知</td><td>7,105.16</td></tr>
</table>

後ろから奇数番目の要素が tr のとき背景色が黄色になります。また、各行の後ろから3カラム目の要素が td のとき文字色が青になります（１行目は th なので、文字色は変わりません）。

また、"四国" は２行目にあるカラムなので背景色は変わりません。

３つ目の例は注意が必要です。td.x:nth-last-child(2) は、class="x" が記述された td 要素の、後ろから２番目が対象ではありません。後ろから２番目の子要素が td 要素に class="x" が記述されていた場合が対象になります。

（１６） E:first-child

親要素から見て、最初の子要素が E 要素のとき対象になります（最初の子要素が E 要素でなければ対象外です）。

また、first-child の対象はあくまで前から１番目の子要素です。.class、#ID、[attr] などが指定されていたとしても、それらによって絞り込まれた E 要素の前から数えた１番目ではありません。

記述例

スタイルシート
  tr:first-child{background-color:yellow;}
  td:first-child{color:blue;}
  td.x:first-child{background-color:pink;}

ボディ
<table border="1">
 <tr><th>&nbsp;</th><th>県名</th><th>県庁所在地</th><th>面積（km<sup>2</sup>)</th></tr>
 <tr><td rowspan="4">四国</td><td>香川県</td><td>高松</td><td>1,876.53</td></tr>
 <tr><td>徳島県</td><td>徳島</td><td>4,146.67</td></tr>
 <tr><td class="x">愛媛県</td><td>松山</td><td>5,678.18</td></tr>
 <tr><td>高知県</td><td class="x">高知</td><td>7,105.16</td></tr>
</table>

最初の行（tr）の背景色が黄色に、各行の最初のカラム（td）の文字色が青になります（１行目は th なので、文字色は変わりません）。

また、２行目は "四国" が最初のカラムなので "香川県" ではなく "四国" の文字色が変わります。

３つ目の例は注意が必要です。td.x:first-child は、class="x" が記述された td 要素の、前から１番目が対象ではありません。前から１番目の子要素が td 要素に class="x" が記述されていた場合が対象になります。

（１７） E:last-child

親要素から見て、最後の子要素が E 要素のとき対象になります（最後の子要素が E 要素でなければ対象外です）。

また、last-child の対象はあくまで後ろから１番目の子要素です。.class、#ID、[attr] などが指定されていたとしても、それらによって絞り込まれた E 要素の後ろから数えた１番目ではありません。

記述例

スタイルシート
  tr:last-child{background-color:yellow;}
  td:last-child{color:blue;}
  td.x:last-child{color:blue;}

ボディ
<table border="1">
 <tr><th>&nbsp;</th><th>県名</th><th>県庁所在地</th><th>面積（km<sup>2</sup>)</th></tr>
 <tr><td rowspan="4">四国</td><td>香川県</td><td>高松</td><td>1,876.53</td></tr>
 <tr><td>徳島県</td><td>徳島</td><td>4,146.67</td></tr>
 <tr><td>愛媛県</td><td>松山</td><td class="x">5,678.18</td></tr>
 <tr><td>高知県</td><td class="x">高知</td><td>7,105.16</td></tr>
</table>

最後の行（tr）の背景色が黄色に、各行の最後のカラム（td）の文字色が青になります（１行目は th なので、文字色は変わりません）。

３つ目の例は注意が必要です。td.x:last-child は、class="x" が記述された td 要素の、後ろから１番目が対象ではありません。後ろから１番目の子要素が td 要素に class="x" が記述されていた場合が対象になります。

（１８） E:only-child

親要素から見て、唯一の子要素が E 要素のとき対象になります。

記述例

スタイルシート
  tr:only-child{background-color:yellow;}

ボディ
<table border="1">
 <thead title="タイトル">
  <tr><th>&nbsp;</th><th>県名</th><th>県庁所在地</th><th>面積（km<sup>2</sup>)</th></tr>
 </thead>
 <tr><td rowspan="4">四国</td><td>香川県</td><td>高松</td><td>1,876.53</td></tr>
 <tr><td>徳島県</td><td>徳島</td><td>4,146.67</td></tr>
 <tr><td>愛媛県</td><td>松山</td><td>5,678.18</td></tr>
 <tr><td>高知県</td><td>高知</td><td>7,105.16</td></tr>
</table>

tr はいくつもありますが、親要素の中に唯一なのは thead の中の tr のみです。したがって、thead の中の tr の背景色が黄色になります。

（１９） E:nth-of-type(N)

親要素から見て、N 番目の E 要素が対象になります。N には次のようなものが指定できます。

ただし、最初の要素が１番目ですので注意してください。

また、nth-of-type(N) の対象はあくまで前から N 番目の E 要素です。.class、#ID、[attr] などが指定されていたとしても、それらによって絞り込まれた E 要素の前から数えた N 番目ではありません。

記述例

スタイルシート
  tr:nth-of-type(even){color:blue;}
  td:nth-of-type(1){background-color:yellow;}

ボディ
<table border="1">
 <tr><th>&nbsp;</th><th>県名</th><th>県庁所在地</th><th>面積（km<sup>2</sup>)</th></tr>
 <tr><th rowspan="4">四国</th><td>香川県</td><td>高松</td><td>1,876.53</td></tr>
 <tr><td>徳島県</td><td class="x">徳島</td><td>4,146.67</td></tr>
 <tr><td>愛媛県</td><td>松山</td><td>5,678.18</td></tr>
 <tr><td>高知県</td><td class="x">高知</td><td class="x">7,105.16</td></tr>
</table>

偶数番目の tr 要素の文字色が青になります（"四国" は２行目にあるカラムなので青になります）。、各行の１番目の td 要素の背景色が黄色になります（１行目は th なので背景色は変わりません。また、２行目は"四国" が th なので、"香川県" が１番目の td になりますので、背景色が変わります）。

３つ目の例は注意が必要です。td.x:nth-of-type(2) は、class="x" が記述された td 要素の、前から２番目が対象ではありません。２番目の td 要素に class="x" が記述されていた場合が対象になります。

（２０） E:nth-last-of-type(N)

親要素から見て、後ろから N 番目の E 要素が対象になります。N には次のようなものが指定できます。

ただし、最初の要素が１番目ですので注意してください。

また、nth-last-of-type(N) の対象はあくまで後ろから N 番目の E 要素です。.class、#ID、[attr] などが指定されていたとしても、それらによって絞り込まれた E 要素の後ろから数えた N 番目ではありません。

記述例

スタイルシート
  tr:nth-last-of-type(odd){background-color:yellow;}
  td:nth-last-of-type(3){color:blue;}
  td.x:nth-last-of-type(2){background-color:pink;}

ボディ
<table border="1">
 <tr><th>&nbsp;</th><th>県名</th><th>県庁所在地</th><th>面積（km<sup>2</sup>)</th></tr>
 <tr><td rowspan="4">四国</td><td>香川県</td><td>高松</td><td>1,876.53</td></tr>
 <tr><td>徳島県</td><td class="x">徳島</td><td>4,146.67</td></tr>
 <tr><td>愛媛県</td><td>松山</td><td>5,678.18</td></tr>
 <tr><td class="x">高知県</td><td class="x">高知</td><td>7,105.16</td></tr>
</table>

後ろから奇数番目の tr 要素の背景色が黄色になります（"四国" は２行目にあるカラムなので背景色は変わりません）。各行の後ろから3カラム目の td 要素の文字色が青になります（１行目は th なので、文字色は変わりません）。

３つ目の例は注意が必要です。td.x:nth-last-of-type(2) は、class="x" が記述された td 要素の、後ろから２番目が対象ではありません。後ろから数えて２番目の td 要素に class="x" が記述されていた場合が対象になります。

（２１） E:first-of-type

親要素から見て、子要素の内最初の E 要素が対象になります。

また、first-child の対象はあくまで前から１番目の E 要素です。.class、#ID、[attr] などが指定されていたとしても、それらによって絞り込まれた E 要素の前から数えた１番目ではありません。

記述例

スタイルシート
  td:first-of-type{color:blue;}
  tr:first-of-type{background-color:yellow}
  td.x:first-of-type{background-color:pink}

ボディ
<table border="1">
 <thead title="タイトル">
   <tr><th>&nbsp;</th><th>県名</th><th>県庁所在地</th><th>面積（km<sup>2</sup>)</th></tr>
 </thead>
 <tr><th rowspan="4">四国</th><td>香川県</td><td>高松</td><td>1,876.53</td></tr>
 <tr><td>徳島県</td><td>徳島</td><td>4,146.67</td></tr>
 <tr><td class="x">愛媛県</td><td>松山</td><td>5,678.18</td></tr>
 <tr><td>高知県</td><td class="x">高知</td><td>7,105.16</td></tr>
</table>

したがって、親要素（tr）の最初の td 要素である "香川県"、"徳島県" などの文字色が青になります。

また、親要素（thead）の最初の tr 要素である１行目と table 要素の最初の tr 要素である２行目（"香川県" の行）の背景色が黄色になります（"四国" も２行目の１カラム目なので背景色が黄色になります）。

３つ目の例は注意が必要です。td.x:first-of-type は、class="x" が記述された td 要素の、前から１番目が対象ではありません。前から１番目の td 要素に class="x" が記述されていた場合が対象になります。

（２２） E:last-of-type

親要素から見て、子要素の内最後の E 要素が対象になります。

また、last-of-type の対象はあくまで後ろから１番目の E 要素です。.class、#ID、[attr] などが指定されていたとしても、それらによって絞り込まれた E 要素の後ろから数えた１番目ではありません。

記述例

スタイルシート
  td:last-of-type{color:blue;}
  tr:last-of-type{background-color:yellow}
  td.x:last-of-type{background-color:pink;}

ボディ
<table border="1">
 <thead title="タイトル">
   <tr><th>&nbsp;</th><th>県名</th><th>県庁所在地</th><th>面積（km<sup>2</sup>)</th></tr>
 </thead>
 <tr><th rowspan="4">四国</th><td>香川県</td><td>高松</td><td>1,876.53</td></tr>
 <tr><td>徳島県</td><td>徳島</td><td>4,146.67</td></tr>
 <tr><td>愛媛県</td><td>松山</td><td class="x">5,678.18</td></tr>
 <tr><td>高知県</td><td class="x">高知</td><td>7,105.16</td></tr>
</table>

親要素（tr）の最後の td 要素である "1,876.53"、"4,146.67" などの文字色が青になります（"面積（km²)" は th 要素なので文字色は変わりません）。

また、親要素（thead）の最後の tr 要素である１行目と table 要素の最後の tr 要素である５行目（"高知県" の行）の背景色が黄色になります（"四国" は２行目の１カラム目なので背景色は変わりません）。

３つ目の例は注意が必要です。td.x:last-of-type は、class="x" が記述された td 要素の、後ろから１番目が対象ではありません。後ろから１番目の td 要素に class="x" が記述されていた場合が対象になります。

（２３） E:only-of-type

親要素から見て、子要素としての E 要素が一つだけの場合、その要素が対象になります。

記述例

スタイルシート
  th:only-of-type{color:blue;}
  tr:only-of-type{background-color:yellow}

ボディ
<table border="1">
 <thead title="タイトル">
   <tr><th>&nbsp;</th><th>県名</th><th>県庁所在地</th><th>面積（km<sup>2</sup>)</th></tr>
 </thead>
 <tr><th rowspan="4">四国</th><td>香川県</td><td>高松</td><td>1,876.53</td></tr>
 <tr><td>徳島県</td><td>徳島</td><td>4,146.67</td></tr>
 <tr><td>愛媛県</td><td>松山</td><td>5,678.18</td></tr>
 <tr><td>高知県</td><td>高知</td><td>7,105.16</td></tr>
</table>

th 要素を子要素として一つだけ持つ親要素は２行目の tr 要素なので、その子要素の th 要素である "四国" の文字色が青になります。

また、tr 要素を子要素として一つだけ持つ親要素は thead 要素なので、その子要素の tr 要素である１行目の背景色が黄色になります。

（２４） E:link

未訪問リンクのスタイルを指定します。

記述例

スタイルシート
  a:link {color:green;}

ボディ
<p><a href="#">未訪問リンク</a></p>

まだクリックしていないときの文字色が緑になります。

なお、この例ではクリックしてもリンク先に変わらないようにしています。

（２５） E:visited

訪問済みリンクのスタイルを指定します。

記述例

スタイルシート
  a:visited {color:lightgrey;}

ボディ
<p><a href="#">訪問済みリンク</a></p>

クリックすると文字色がグレイになります。

（２６） E:active

マウスでクリックしている最中のような、アクティブな状態のスタイルを指定します。

記述例

スタイルシート
  span.hilite:active {background-color:red;}

ボディ
<p>この文章の<span>特定の場所</span>をクリック（<span class="hilite">ボタン</span>は押したまま）すると、<span>背景色</span>が赤くなります。</p>

クラス名が hilite の span 要素をクリックしてボタンを離さないままにしていると、背景色が赤になります。

（２７） E:hover

要素にカーソルなどが乗った状態のスタイルを指定します。

記述例

スタイルシート
  span.hilite:hover {background-color:yellow;}

ボディ
<p><span>特定の場所</span>に<span class="hilite">マウスポインター</span>を乗せると、<span>背景色</span>が黄色くなります。</p>

クラス名が hilite の span 要素の上にマウスポインターを乗せると、背景色が黄色になります。

（２８） E:target

リンクのターゲット先となる E 要素のスタイルを指定します。

記述例

スタイルシート
  .note1:target {background-color:blue;color:white;}
  .note2:target {background-color:yellow;}
  .note3:target {background-color:red;color:white;}

ボディ
<p><span id="t1" class="note1">blue</span>　<span id="t2" class="note2">yellow</span>　<span id="t3" class="note3">red</span></p>
<p><a href="#t1">青</a>　<a href="#t2">黄</a>　<a href="#t3">赤</a></p>

クリックするとターゲット先の背景に色がつきます。

（２９） E:focus

フォーカスがあてられている状態のスタイルを指定します。

記述例

スタイルシート
  input:focus {background-color:yellow;}

ボディ
<form method="post" action="input.cgi">
<label>氏名：<input type="text" name="name"></label><br>
性別：
<label><input type="radio" name="gender" value="male"> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>
<br><br>
所持品：
<label><input type="checkbox" name="prop" value="CellPhone" checked="checked"> スマフォ</label>
<label><input type="checkbox" name="prop" value="Car"> 自動車</label>
<label><input type="checkbox" name="prop" value="Cottage"> 別荘</label>
<br>
<label>好きな果物：
<select name="fruits">
 <option>りんご</option>
 <option>みかん</option>
 <option selected="selected">バナナ</option>
 <option>パイナップル</option>
</select></label>
<br><br>
<textarea name="freeans" rows="4" cols="40" placeholder="自由に意見を記述してください"></textarea>
<br><br><input type="submit" value="送信">　<input type="reset" value="取り消し">
</form>

フォーカスがあてられている（マウスをクリックする、タブキーで移動するなどして、入力対象となっている）input 要素の背景色が黄色になります。

ただし、input 要素の type が text の文字列入力欄や submit などのボタンしか背景色は変わらないようです。

なお、この例ではボタンをクリックしても何も起きないようにしています。

（３０） E:lang(L)

特定の言語 L を指定されている E 要素のスタイルを指定します。

言語については、言語コード一覧を参照してください。

記述例

スタイルシート
  q:lang(en) {color:blue;}

ボディ
<p lang="ja"><q>こんにちは</q>は日本語だけど、<q lang="en">Hello</q>は英語です。</p>

言語として en が指定されている q 要素の文字色が青になります。

（３１） E:enabled

フォームにおいて入力可能に設定されている E 要素のスタイルを指定します。

記述例

スタイルシート
  input:enabled {background-color:yellow;}
  input[type="checkbox"]:enabled {outline: solid 2px blue;}

ボディ
<form action="#">
  入力欄：<input type="text" name="param" value="初期値" disabled><br>
  選択欄：<input type="checkbox" name="data" value="1" checked>チェック1
         <input type="checkbox" name="data" value="2">チェック2
         <input type="checkbox" name="data" value="3" disabled>チェック3<br>
  ボタン：<input type="submit" value="送信">　　<input type="reset" value="中止" disabled>
</form>

ボタンを含めて、入力可能な input 要素の背景色が黄色になります。ただし、チェックボックスの背景色は変わらないようです。

別途、チェックボックスは枠を青くしています。

（３２） E:disabled

フォームにおいて入力不可に設定されている E 要素のスタイルを指定します。

記述例

スタイルシート
  input:disabled {background-color:darkgray;}
  input[type="checkbox"]:disabled {outline: solid 2px gray;}

ボディ
<form action="#">
  入力欄：<input type="text" name="param" value="初期値" disabled><br>
  選択欄：<input type="checkbox" name="data" value="1" checked>チェック1
         <input type="checkbox" name="data" value="2">チェック2
         <input type="checkbox" name="data" value="3" disabled>チェック3<br>
  ボタン：<input type="submit" value="送信">　　<input type="reset" value="中止" disabled>
</form>

ボタンを含めて、入力不可な input 要素の背景色が濃いグレイになります。ただし、チェックボックスの背景色は変わらないようです。

別途、チェックボックスは枠をグレイにしています。

（３３） E:checked

フォームにおいてチェック状態の E 要素（チェックボックスやラジオボタン）のスタイルを指定します。

記述例

スタイルシート
  input:checked {outline: solid 3px red;}

ボディ
<form action="#">
  入力欄：<input type="text" name="param" value="初期値" disabled><br>
  選択欄：<input type="checkbox" name="data" value="1" checked>チェック1
         <input type="checkbox" name="data" value="2">チェック2
         <input type="checkbox" name="data" value="3" disabled>チェック3<br>
  ボタン：<input type="submit" value="送信">　　<input type="reset" value="中止" disabled>
</form>

チェック状態の input 要素の枠が赤になります。

（３４） E::first-line

E 要素の最初の行のスタイルを指定します。

ただし、フレージング・コンテンツに分類される要素には無効のようです。

記述例

スタイルシート
  p::first-line {color:blue;}

ボディ
<p>私たちが初めて会ったのは、<time datetime="2001-01-07">21世紀に入った最初の日曜日</time>だった。</p>
<p>デジタル時計は、<br>ちょうど<time>16:00</time>を表示していた。</p>

表示幅を狭くし、最初の文章は無理矢理に次の行に続くようにさせています。２つ目の文章は途中に改行（<br>）を入れて２行に分けています。ともに、１行目の文字色が青になっています。

（３５） E::first-letter

E 要素の最初の文字のスタイルを指定します。

ただし、フレージング・コンテンツに分類される要素には無効のようです。

記述例

スタイルシート
  ::first-letter {color:red;}

ボディ
<h3>はじまり</h3>
<p>私たちが初めて会ったのは、<time datetime="2001-01-07">21世紀に入った最初の日曜日</time>だった。</p>
<p>デジタル時計は、<br>ちょうど<time>16:00</time>を表示していた。</p>

要素内の最初の文字色が赤になっています。改行後の文字は最初の文字とはみなされません。

ブラウザやフォントによっては、f と i や f が隣り合う場合、i の点が f の上部と結合されるなどして１文字のように合字され表示されることがあります。

例えば、最初の文字が fi だとすると、fi が１文字として扱われるため、::first-letter は f だけではなく、fi を対象としてしまうことがあります。

f と i などを合字するかどうかは、font-variant-ligatures で指定することができます。

は、fi が１文字として扱われていても f だけを対象としているようです。

（３６） E::before

E 要素の内容の前に挿入する文字列や画像、そしてそのスタイルを指定します。挿入する文字列や画像などは content 要素で指定します。

content には以下のような値を指定します。空白で区切れば複数指定することもできます。

content

記述例

スタイルシート
  time::before {content:open-quote url("clock.png") attr(datetime) close-quote;color:red;}
  p {counter-increment: a;}
  p::before {content: "(" counter(a) ") ";}

ボディ
<p>私たちが初めて会ったのは、<time datetime="2001-01-07">21世紀に入った最初の日曜日</time>だった。</p>
<p>デジタル時計は、ちょうど<time>16:00</time>を表示していた。</p>

time 要素内の先頭に赤色で引用符で囲んで clock.png の画像を挿入しています。また、time 要素に datetime 属性がある場合はその値も表示しています。

また、p 要素にはカウンターが設定されていますので、順に番号が付けられています。

カウンターが階層になっている場合には、counters() を使用します。

記述例

スタイルシート
  ol {counter-reset: s; list-style-type: none;}
  li {counter-increment: s;}
  li::before {content: counters(s, ".") " ";}

ボディ
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item
        <ol>
          <li>item</li>
          <li>item</li>
          <li>item</li>
        </ol>
      </li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>

counter-reset はカウンタを 0 にしますので、ol 要素ごとに 0 になります。ただし、"." を付加されて階層が深くなります。

li 要素の counter-increment でカウンタに 1 加算されます。そして、li 要素内の先頭に表示されます。

（３７） E::after

E 要素の内容の後ろに挿入する文字列や画像など、そしてそのスタイルを指定します。挿入する文字列や画像などは content（E::before を参照）で指定します。

記述例

スタイルシート
  time::before {content:"≪";}
  time::after {content:"≫";}

ボディ
<p>私たちが初めて会ったのは、<time datetime="2001-01-07">21世紀に入った最初の日曜日</time>だった。</p>
<p>デジタル時計は、ちょうど<time>16:00</time>を表示していた。</p>

time 要素内の前後に "≪≫" を挿入しています。

（３８） E:not(S)

S で指定するセレクタに当てはまらない E 要素のスタイルを指定します。

記述例

スタイルシート
  time:not([datetime]) {color:blue;}

ボディ
<p>私たちが初めて会ったのは、<time datetime="2001-01-07">21世紀に入った最初の日曜日</time>だった。</p>
<p>デジタル時計は、ちょうど<time>16:00</time>を表示していた。</p>

datetime 属性を持たない time 要素の文字色が青になります。

（１） S1 S2

S1 要素の子孫として出現する S2 要素が対象になります。階層は深くても構いません。子孫セレクタとも呼ばれます。

記述例

スタイルシート
  p span time{color:blue;}

ボディ
<h3>はじまり</h3>
<p>私たちが初めて会ったのは、<time datetime="2001-01-07">21世紀に入った最初の日曜日</time>だった。</p>
<p>デジタル時計は、<span><em>ちょうど<time>16:00</time></em>を表示</span>していた。</p>

p 要素内のさらに span 要素内の time 要素の文字色が青になります。なお、span 要素の直下になくても、span 要素内の別の要素の中にある time 要素も対象になります。

（２） S1 > S2

S1 要素の子として出現する S2 要素が対象になります。直下である必要があります。子セレクタとも呼ばれます。

記述例

スタイルシート
  p > time{color:blue;}

ボディ
<h3>はじまり</h3>
<p>私たちが初めて会ったのは、<time datetime="2001-01-07">21世紀に入った最初の日曜日</time>だった。</p>
<p>デジタル時計は、<span>ちょうど<time>16:00</time>を表示</span>していた。</p>

p 要素内直下に記述されている time 要素の文字色が青になります。

２つ目の time 要素は p 要素直下ではありませんので、青くなりません。

（３） S1 + S2

S1 要素の直後に出現する S2 要素が対象になります。隣接兄弟セレクタとも呼ばれます。

記述例

スタイルシート
  h3 + p{color:blue;}

ボディ
<h3>はじまり</h3>
<p>私たちが初めて会ったのは、<time datetime="2001-01-07">21世紀に入った最初の日曜日</time>だった。</p>
<p>デジタル時計は、ちょうど<time>16:00</time>を表示していた。</p>

h3 要素の直後に記述されている p 要素の文字色が青になります。

２つ目の p 要素は h3 要素の直後ではありませんので、青くなりません。

（４） S1 ~ S2

S1 要素の後に S1 要素と同じ階層で出現する S2 要素が対象になります。兄弟セレクタとも呼ばれます。

記述例

スタイルシート
  h3 ~ p{color:blue;}

ボディ
<p>実は...</p>
<h3>はじまり</h3>
<p>私たちが初めて会ったのは、<time datetime="2001-01-07">21世紀に入った最初の日曜日</time>だった。</p>
<p>デジタル時計は、ちょうど<time>16:00</time>を表示していた。</p>

h3 要素の後に記述されている p 要素の文字色が青になります。

１つ目の p 要素は h3 要素の後ではありませんので（前なので）、青くなりません。

（５） S1, S2

S1 要素 と S2 要素が対象になります。いくつ記述しても構いません。

記述例

スタイルシート
  h3, time[datetime]{color:blue;}

ボディ
<h3>はじまり</h3>
<p>私たちが初めて会ったのは、<time datetime="2001-01-07">21世紀に入った最初の日曜日</time>だった。</p>
<p>デジタル時計は、ちょうど<time>16:00</time>を表示していた。</p>

h3 要素と datetime 属性を持つ time 要素の文字色が青になります。