CSSセレクタを使うと、スタイルを適用する要素の条件を指定することができます。CSSセレクタの一覧とその使い方をご紹介します。
ある条件に合致した要素に対してスタイルシートを適用することができる。これをセレクタと呼ぶ。その指定形式を次に示す。
pattern { attribute-list }パターンをカンマで区切って複数指定することもできる。この場合、指定したパターンのいずれかにマッチすればスタイルシート属性が適用される。
pattern1, pattern2, pattern3 { attribute-list }カンマが無く、空白で区切ってしまうと、子孫セレクタになってしまうので注意が必要である。
以下に示す要素タイプを指定できる。
| セレクタ | 説明 |
|---|---|
* |
すべての要素 |
element |
特定の要素 |
element1 > element2 |
子要素 |
element1 element2 |
子孫要素 |
element1 + element2 |
隣接する兄弟要素 |
element1 ~ element2 |
兄に後続する弟要素 |
CSSのセレクタですべての要素タイプにマッチさせるには、パターンにアスタリスクを指定する。すべての要素タイプにマッチするCSSセレクタを「ユニバーサル・セレクタ」と呼ぶ。
すべての要素の文字をグレーにする例を次に示す。
* {
color: gray;
}なお、要素に条件を加える場合には、ユニバーサル・セレクタを省略できる。つまり、*.class は .class と同等である。また、*#id は #id と同等である。
CSSのセレクタで特定の要素タイプにマッチさせるには、パターンに要素タイプ名を指定する。
すべてのh2要素に対してスタイルを定義する例を示す。
h2 {
font-size: xx-large;
}h2要素、h3要素及びh4要素に対してスタイルを定義する例を次に示す。
h2, h3, h4 {
color: red;
}| パターン | 説明 |
|---|---|
| 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>上記の表示例を次に示す。
child2
child2
| パターン | 説明 |
|---|---|
| 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>上記の表示例を次に示す。
descendant2
descendant3
CSSのセレクタで兄に後続する弟要素にマッチさせるには、２つの要素の間にプラス + を指定する。
親要素 hgroup に対する子要素のうち、兄弟関係にある h2 要素の直後の弟要素 p に対して文字の色をグレーにする例を次に示す。
h2 + p {
color: gray;
}<!-- 親 -->
<hgroup>
<!-- 長男 -->
<h2>EXAMPLE</h2>
<!-- 次男 -->
<p>この要素の文字がグレーになる。</p>
<!-- 三男 -->
<p>この要素の文字はグレーにならない。</p>
<!-- 四男 -->
<p>この要素の文字はグレーにならない。</p>
</hgroup>
<!-- 親 -->
<hgroup>
<!-- 長男 -->
<h3>EXAMPLE</h3>
<!-- 次男 -->
<p>この要素の文字はグレーにならない。</p>
</hgroup>CSSのセレクタで兄に後続する弟要素にマッチさせるには、２つの要素の間にチルダ ~ を指定する。
親要素 hgroup に対する子要素のうち、兄弟関係にある h2 要素に続くすべての弟要素 p に対して文字の色をグレーにする例を次に示す。
h2 ~ p {
color: gray;
}<!-- 親 -->
<hgroup>
<!-- 長男 -->
<h2>EXAMPLE</h2>
<!-- 次男 -->
<p>この要素の文字がグレーになる。</p>
<!-- 三男 -->
<p>この要素の文字がグレーになる。</p>
<!-- 四男 -->
<p>この要素の文字がグレーになる。</p>
</hgroup>
<!-- 親 -->
<hgroup>
<!-- 長男 -->
<h3>EXAMPLE</h3>
<!-- 次男 -->
<p>この要素の文字はグレーにならない。</p>
</hgroup>| パターン | 説明 |
|---|---|
| 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 に値が設定されていれば、マッチする。属性 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>上記の表示例を次に示す。
要素 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
要素 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
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 | クリックされたときのリンク |
| hover | マウスカーソルが乗せられたリンク | |
| 任意 | :first-child | 最初の子要素 |
| :focus | フォーカスを得た要素 | |
| :link | まだ訪れていないURLを指し示すリンク | |
| :nth-of-type() | 兄弟要素のうち指定した位置のもの | |
| :visited | 既に訪れたことがあるURLを指し示すリンク |
:first-child は、親の最初の子供である要素を表す擬似クラスである。
要素が、その親の最初の子供である場合にマッチする。
p要素が、その親要素の最初の子要素である場合に適用するスタイルシートを指定する例を示す。
p:first-child { color: red }親要素divが2つの子要素（p要素）を持つHTMLの例を示す。
<div>
<p>最初の段落だけ赤くなります。</p>
<p>以降の段落は赤くなりません。</p>
</div>最初の段落だけ赤くなります。
以降の段落は赤くなりません。
:lang(lang) は、言語が lang である要素を表す擬似クラスである。
:last-child は、親の最後の子供である要素を表す擬似クラスである。
スタイルシートを外部ファイルで定義した場合は、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 は、ハイパーリンクのアンカーであり、かつ、そのハイパーリンクのターゲットにまだ訪れていない要素を表す擬似クラスである。
擬似クラスは次の順番で指定する必要がある。
CSS の :nth-of-type 疑似クラスは、兄弟要素グループのうち指定した位置にある要素にマッチするセレクタである。
element:nth-of-type(position)| 値 | 説明 |
|---|---|
| an | a番目ごと（n = 0, 1, 2, ...） |
| an+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>:root 疑似クラスは、HTMLツリーのルート要素であるhtml要素を選択するセレクタです。つまり、html 要素セレクタと同じです。
おもに、グローバルのCSS変数を宣言するのに使われます。
:root {
/* 変数の宣言 */
--color-primary: blue;
}:visited は、ハイパーリンクのアンカーであり、かつ、そのハイパーリンクのターゲットへ既に訪れている要素を表す擬似クラスである。
もし要素がハイパーリンクのアンカーであり、かつ、そのハイパーリンクのターゲットへ既に訪れていれば、その要素にマッチするパターン。
a:visited { color: green }a:hover は、ホバーになった要素を表す擬似クラスである。
a要素がホバー状態のときにマッチするパターン。アンカーをマウスでポイントしたときに適用するスタイルシートを指定する。
<a>
と
</a>
に囲まれた文字列（アンカー）の上にマウスカーソルを乗せたときにのみ適用するスタイルを指定できます。
定義済みクラス
a:hover
の使用例と表示サンプルを示します。表示結果はブラウザによって異なることがあります。
a:hover { color: red; }<a href="#a_hover">マウスのカーソルを乗せると赤くなります</a>a:active はアクティブになっているリンクを表す擬似クラスである。a要素がアクティブな状態のときにマッチする。アンカーをクリックしたときに適用するスタイルシートを指定する。
<a>
と
</a>
に囲まれた文字列（アンカー）をマウスでクリックされたとき、またはTABキーでフォーカスを移動したときにのみ適用するスタイルを指定できます。
定義済みクラス
a:active
の使用例と表示サンプルを示します。表示結果はブラウザによって異なることがあります。
a:active { font-size: xx-large; }<a href="#a_active">クリックすると大きくなります</a>:focus は、フォーカスを得た要素を表す擬似クラスである。
要素 E がフォーカスを得た場合にマッチするパターン。
:focuselement:focus:empty疑似クラスは子を持たない要素を表す。たとえば、次のような要素である。
<p></p>最初の子要素以外
li:not(:first-child) {
padding-top: 1rem;
}最後の子要素以外
li:not(:last-child) {
padding-bottom: 1rem;
}IDセレクタとは、指定したIDにマッチするセレクタである。HTMLにおいてIDはユニークなものであるので、特定の要素にのみマッチする。
[element]#id/* <div id="example1"> にマッチ */
div#example1 {
/* properties */
}
/* id="example2" にマッチ */
*#example2 {
/* properties */
}/* 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 (2025) Selectors Level 4