セレクタ (selector)

セレクタによって、スタイルを適用する対象を限定できます。

スタイルを適用する対象が重複したときには、詳細度の大きいものが優先されます。

目次

セレクタの種類

セレクタには設定対象ごとに、次の5つがあります。

セレクタ 設定対象
要素型セレクタ
(Type selectors)
HTMLの指定要素
p {}
全称セレクタ
(Universal selectors)
HTMLのすべての要素
* {}
IDセレクタ
(ID selectors)
ID属性
#foo {}
CLASSセレクタ
(Class selectors)
CLASS属性
.bar {}
属性セレクタ
(Attribute selectors)
すべての属性
[id='a'] {}

要素型セレクタ (Type selectors)

特定の要素にのみ適用されるように、スタイルを定義できます。

selector {
  attribute1 : value1;
  attribute2 : value2;
}

全称セレクタ (Universal selectors : ユニバーサルセレクタ)

セレクタの名前を「*」とすることで、すべての要素に適合します。

* { margin: 0; }

スターハック (Star html hack)

Windows版 IE4~6とMac版 IE4~5にのみ適用するように、スタイルを定義できます。これはCSSハックの一種で、セレクタの前に* htmlの記述を付加し次のように記述します。

* html .style1 { margin: 0 }

属性セレクタ (Attribute selectors)

要素の属性が特定の条件を満たす場合のみ適用されるように、スタイルを定義できます。なおInternet Explorerでは、これはVer.7以降でサポートされます。

構文 適応する属性の値の条件
マッチタイプ 説明
[attr] --- 属性を持つ
[attr='value'] 完全一致 値が正確に'value'
[attr~='value'] 値がスペースで区切られた項目リストであり、うち1つが正確に'value'
[attr^='value'] 前方一致 値が'value'で始まる
[attr$='value'] 後方一致 値が'value'で終わる
[attr*='value'] 部分一致 値に部分文字列として'value'という文字列が、少なくても1つ存在する
[attr|='value'] 完全一致または後方一致 値が正確に'value'であるか、直後にハイフン (U+002D) を伴った'value-'の形式 (言語のサブコードへのマッチ用)
属性セレクタ - CSS | MDN Attribute Selector - CSS/Selectors - Web Education Community Group

valueの値は、CSSの識別子または文字列で指定します。大文字/小文字が区別されるかどうかは、ドキュメントの言語に依存します。6.3.1. Attribute presence and value selectors - Selectors Level 3

valueをCSSの識別子で記述

識別子として指定できるのは、以下の文字です。identifiers - Syntax and basic data types

  • 英字 (a~z、A~Z)
  • 数字 (0~9) ※1
  • ISO 10646 (Unicode)
  • ハイフン (-) ※1
  • アンダースコア (_)

※1 識別子は、数字、数字が続くハイフン、2つ続くハイフン (--) からは始められないため、その必要があるときはクォートで囲み文字列として記述します。

valueを文字列で記述

文字列で指定するときは、ダブルクォートまたはシングルクォートで囲みます。ダブルクォートで囲むときは、その内部にダブルクォートを記述するにはバックスラッシュでエスケープします。シングルクォートで囲むときも同様です。4.3.7 Strings - Syntax and basic data types

Do values in CSS attribute selector values need to be quoted? - Stack Overflow

サンプル

記述例
コード 適用対象
a[href^='#']
ページ内へのリンク
a[href$='.com']
URLが.comで終わるリンク
a[href*='example']
URLにexampleを含むリンク
[attr='value']と[attr~='value']の比較

完全一致でマッチする2つのセレクタ、[attr='value'][attr~='value']の違いを確認します。

<style type="text/css">
  span[title='aa'] { color: red; }
  span[title~='aa'] { border: 1px solid; }
</style>
<span title="aa"   >A</span>
<span title="aa bb">B</span>
<span title="aa-bb">C</span>
A B C

...~='aa'は、'aa'と'aa bb'にマッチします。ただしスペースで区切られていないため、'aa-bb'にはマッチしません。

[attr|='value']が後方一致する場合

[attr|='value']は基本的に完全一致ですが、例外的に後方一致する場合の条件について検証してみます。

<style type="text/css">
  span[title|='aa'] { border: 1px solid; }
</style>
<span title="aa"    >A</span> // ○
<span title="-aa"   >B</span>
<span title="a-"    >C</span>
<span title="aa-"   >D</span> // ○
<span title="aa-bb" >E</span> // ○
<span title="aa-abc">F</span> // ○
<span title="aaa"   >G</span>
<span title="aaa-"  >H</span>
A B C D E F G H

...|='aa'は、正確に'aa'か、もしくは'aa-'で始まる文字にマッチします。

input要素への適用
<style type="text/css">
  input[value='A'] { color: red; }
</style>
<input type="text" value="A" />
<input type="text" value="B" />

value属性を対象とした場合、スタイルが適用されるのは初期値にマッチした場合のみです。value属性の値をマッチするように書き換えてもスタイルは適用されず、マッチしている要素はそれを書き換えてもスタイルは変化しません。

checked属性も属性セレクタで指定すれば同様ですが、この属性には疑似クラスの:checkedクラスによる指定方法が用意されています。

IDセレクタ (ID selectors)

要素のID属性が完全一致する場合のみ適用されるように、スタイルを定義できます。

#id_value { style properties }
IDセレクタ - CSS | MDN

意味としては、次のように属性セレクタで記述しても同じです。

[id='id_value'] { style properties }

よってこれを応用すれば、ID属性に対して完全一致以外でもスタイルを適用させられます。

[id*='id_value'] {}
[id^='id_value'] {} ...

クラスセレクタ (Class selectors)

要素のclass属性が指定のクラス名を含む場合にのみ適用されるように、定義できます。

.classname { style properties }
クラスセレクタ - CSS | MDN

クラスセレクタの意味は、属性セレクタでは

[class~='classname'] { style properties }

と表せます。

大文字/小文字の区別

HTMLの要素名や属性名の指定については、大文字/小文字は区別されません。しかし属性セレクタの指定値では、区別されることがあります。

たとえば<div id="A"></div>に対しては、div{}でもDIV{}でも適用されます。また[id='A']{}でも[ID='A']{}でも適用されますが、属性値を小文字にして[id='a']{}とすると適用されません。

セレクタの構文

グループ化 (Grouping)

セレクタ名をカンマ (,) で区切って記述することで、複数のセレクタに同一のスタイルを適用できます。Grouping - W3C

h1,h2,h3 { color: black }

結合子 (Combinators)

複数のセレクタを組み合わせることで、より複雑な条件を設定できます。

セレクタの種類 スタイルの適用対象 区切り文字 記述例
子孫セレクタ
(Descendant selectors)
ある要素の子孫にあたる要素のみ
子孫セレクタ - CSS | MDN
  (スペース)
a img { }
子供セレクタ
(Child selectors)
ある要素の直接の子供である要素のみ
※ ただし継承が有効な属性では、子孫まで設定が適用される
子セレクタ - CSS | MDN
>
body > p { }
隣接セレクタ
(Adjacent sibling selectors)
ある要素の直後に継続する要素のみ
隣接セレクタ - CSS | MDN
+  
一般兄弟セレクタ
(General sibling selectors)
ある要素のに継続する要素のみ
一般兄弟セレクタ - CSS | MDN
~  
Selectors - W3C

適用例

HTML CSS 適用結果
<div>
    <span>A</span>
    <a>B
        <span>C</span>
    </a>
</div>
子孫セレクタ
div span {
    color: red;
}
A B C
子供セレクタ
div > span {
    color: red;
}
A B C
<span>A</span>
<strong>#</strong>
<span>B</span>
<span>C</span>
隣接セレクタ
strong + span {
    color: red;
}
A # B C
一般兄弟セレクタ
strong ~ span {
    color: red;
}
A # B C
<ol>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ol>
隣接セレクタ
ol li + li + li  {
    color: red;
}
  1. A
  2. B
  3. C
  4. D
  5. E