セレクタ (selector)

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

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

セレクタの種類

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

p {}

* {}

#foo {}

.bar {}

[id='a'] {}

要素型セレクタ (Type selectors)

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

selector {
  attribute1 : value1;
  attribute2 : value2;
}

a { color: red }

全称セレクタ (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以降でサポートされます。

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

使用例

a[href^='#']

a[href$='.com']

a[href*='example']

[attr='value']と[attr~='value']の比較

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

<!-- CSS -->
span[title='aa'] { color: red }
span[title~='aa'] { border: 1px solid }

<!-- HTML -->
<span title="aa"   >A</span>
<span title="aa bb">B</span>
<span title="aa-bb">C</span>

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

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

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

<!-- CSS -->
span[title|='aa'] { border: 1px solid }

<!-- HTML -->
<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>

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

input要素への適用

<!-- CSS -->
input[value='A'] { color: red }

<!-- HTML -->
<input type="text" value="A" />
<input type="text" value="B" />

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

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

IDセレクタ (ID selectors)

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

#id_value { style properties }

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

[id='id_value'] { style properties }

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

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

クラスセレクタ (Class selectors)

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

.classname { style properties }

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

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

と表せます。

<!-- CSS -->
.c1 { color: red }
li.c1 { font-weight: bold }
li.c1.c2 { border: 1px solid }

<!-- HTML -->
<span class="c1">X</span>
<ul>
    <li class="c1">A</li>
    <li class="c2">B</li>
    <li class="c1 c2">C</li>
</ul>

大文字/小文字の区別

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

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

セレクタの構文

グループ化 (Grouping)

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

h1,h2,h3 { color: black }

結合子 (Combinators)

複数のセレクタを組み合わせることで、より複雑な条件を設定できます。この条件をより柔軟にするならば、ツリー構造擬似クラスを用います。

a img { }

body > p { }

適用例

<div>
    <span>A</span>
    <a>B
        <span>C</span>
    </a>
</div>

div span {
    color: red
}

div > span {
    color: red
}

<span>A</span>
<strong>#</strong>
<span>B</span>
<span>C</span>

strong + span {
    color: red
}

strong ~ span {
    color: red
}

<ol>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ol>

ol li + li + li  {
    color: red
}

• 仕様
  • 構文
    • 長さの指定方法
    • 色の指定方法
    • @規則
  • セレクタ
    • 擬似クラス
    • 擬似要素
  • 継承
  • 詳細度
• 属性
  • ボックス
  • レイアウト
  • テキスト
  • リスト
  • テーブル
• 文書への適用方法
  • HTMLへの適用
  • 代替スタイルシート
• 最適化
• サンプルコード
  • ボックス内で左寄せや右寄せ
  • CSSで段組
  • ボックス内で下揃え
• ツール

• お問い合わせ
• プライバシーポリシー
• サイトマップ