セレクター(selecter)
セレクター(selecter)は、スタイルシートを反映する エレメントを指定す方法で、CSSの基本となる記述方法です。 CSS や <style> エレメント内で、セレクターによって HTML タグエレメントを指定しスタイル定義を設定します。
例えば以下の<p class="class_name" >
エレメントがあったとします。
<p class="class_name">この段落はセレクターの機能を確かめるためのものです</p>
このエレメントにスタイルシートを反映するには、以下のようにp.class_name
セレクターでエレメントを指定します。
<style> p.calss_name{ /* selecter */margin: 1em; /* property & property value */ padding: 1em; background-color: darkgreen; color: white;} </style>
このセレクターの後の{ と }で囲まれたのがスタイル宣言です。内容はセレクターによって指定されたエレメントの配置や色などを設定しています。これらをスタイルプロパティまたは CSS プロパティといいます。
以下は上記の HTML と CSS を表示したものです。
この段落はセレクターの機能を確かめるためのものです
セレクターには多くの種類があります。詳しくはセレクターの種類
を参照してください。
HTMLソースにスタイル定義を直接宣言することもできます。その場合は、目的のタグエレメントの style 属性に記述します。以下の太字部分がスタイル宣言です。
<p class="calss_name" style="margin: 1em;padding: 1em;background-color: black;color: white;">
スタイル宣言は、プロパティーとその値で構成します。
セレクターにはエレメント自体や class や id といった特定エレメントを指定する方法があります。
ページ全体に関わらないようなエレメント自体にスタイルシートを設定すると、場合によっては初期値に戻してからスタイルを指定し直すといったことが多くなりがちです。
規模が大きくなる場合は class や id といった特定エレメントの指定を利用するようにしたほうが煩雑になり難い傾向があるように思います。
class 属性とセレクター
タグエレメントの class 属性はもともとスタイルシートを反映するエレメントを指定するために用意された属性でした。
今は、いろいろな種類のセレクターが用意されていますが、セレクターを語る上では class 属性が基本といえるでしょう。
例えば、以下のような class 属性をもつ <p> や <span> エレメントがあったとします。
<p class="example">この段落には class 属性でスタイルシートが設定されています。</p> <p>この段落にはスタイルが設定されていません。</p> <p>この段落は<span class="example">この部分だけ</span>がスタイルが反映されます。</p>
class="example"
があるエレメントだけに以下のスタイルを反映させます。
<style>
.example{
background-color: rgba(255, 0, 0, 0.30);
}
</style>
上記の HTML と CSS を表示すると以下のようになります。
この段落には class 属性でスタイルシートが設定されています。
この段落にはスタイルが設定されていません。
この段落はこの部分だけがスタイルが反映されます。
class="example"
が設定されたエレメントのみにスタイルシートが反映されています。
スタイルによるエレメントの指定方法は様々にあります。詳しくは、セレクターの種類
を参照してください。
class属性は複数のセレクターを指定することができます。詳しくはHTMLからの複数のクラス名指定
を参照してください。
セレクターの種類
class指定以外にもエレメントを指定する方法は以下のようにあります。
セレクターは組み合わせて使うこともできますし、複数指定することもできます。
selecter name | 指定方法例 |
---|---|
エレメントセレクタ | p、tableなどタグ名 タグエレメントを指定。例えば、aを指定すれば、全ての<a>が対象になる。 |
クラスセレクタ | .class class="クラス名"を持ったタグエレメント |
IDセレクタ | #id id="ID名"を持ったタグエレメント |
属性セレクタ | [type="example"] タグエレメントの属性名(attribute)と値。name属性はこのセレクタを使う |
全称セレクタ | * 全てが対象に。上記と組み合わせが可能 |
子孫エレメントセレクタ | element child grandChild 子エレメント、孫エレメントの指定 |
隣接エレメントセレクタ | input + label、input ~ label 直後にある兄弟エレメントを指定 |
擬似クラスセレクタ | :hover タグエレメントに何らかの動きがあればという宣言になる |
複数指定
HTML タグエレメントから class 属性によって複数のセレクターを指定することができます。スタイルシートから複数のエレメントを一括で指定することもできます。
HTML からの複数のクラス名指定
HTMLソースのタグエレメントからセレクターを複数指定することができます。
<style> .example{ ... } .foo{ ... } .one{ ... } </style> <p class="example foo one">
タグエレメントのclass属性で、CSS側でもクラスセレクタとどちらもclass名を利用します。
HTMLタグエレメントのclass属性の値で複数のセレクターを指定するには半角スペース
で区切ります。
複数のタグエレメントの指定
セレクターは複数のタグエレメントを指定することもできます。
複数を指定する場合はセレクターをカンマ,
で区切ります。
p, span, a{ font-family: "Times New Roman", Times, sans-serif; }
子エレメント、孫エレメントのセレクター
子エレメントや孫エレメントを指定することもできます。
全ての子孫エレメントを対象にした方法と、直下の子エレメントのみを指定する方法があります。
子孫エレメントのセレクター
子エレメントや孫エレメントは半角スペース
で区切って指定します。対応する全ての子孫エレメントが対象になります。
<style> div p{ font-size: 16px; } </style> <div> <p> ... </p> <p> ... </p> </div>
<style> div p span{ font-weight: bold; } </style> <div> <p> ...<span>...</span>... </p> <p> ...<span>...</span>... </p> </div>
直下の子エレメントのセレクター
限定的な子エレメントを指定したい時は半角の大なり >
を使います。
<style> div > p{ font-weight: bold; } </style> <div> <p> ... </p> <p> ... </p> </div>
隣接する兄弟エレメントのセレクター
隣接する直後の兄弟エレメントを指定することができます。
+
は直後のエレメントだけ、~
は直後の該当するエレメントの全てが対象になります。
+
直後のエレメントだけの指定
+
は直後のエレメントだけが対象になります。
<style> input + label{ ... } </style> <input type="text"></input><label>...</label>
~
直後のエレメントの指定
~
は直後の該当するエレメントの全てが対象になります。
<style> p.example ~ p{ ... } </style> <p class="example"> ... </p> <p> ... </p> <p> ... </p>
属性セレクター
属性セレクターとは、エレメントの属性によって該当するエレメント指定する方法です。基本の形式は以下のようになります。
<style> input[name="example"]{ ... } </style> <input name="example">...</input>
値の指定方法には、正規表現のように値の内容を検索して抽出する機能があります。
値を検索する機能には、属性名のみ
、値の全てが一致
、値の先頭が一致
、値の最後が一致
,値に含まれる
、一部が一致
、使用言語が対象
といった方法があります。
エレメント名を省略し属性のみの指定も出来ます。
<style> [name="example"]{ ... } </style> <input name="example">...</input>
属性名のみ
element[ attr ]
属性名のみで指定する属性セレクターです。該当する属性名をもつエレメントがスタイルを反映する対象になります。
<style> input[readonly]{ ... } </style> <input name="example" type="text" readonly >...</input> <input name="example" type="text">...</input> <input name="example" type="button">...</input>
値の全てが一致
element[ attr = 'value' ]
属性とその値で、値が全一致する属性セレクターです。該当するエレメントにスタイルを反映します。
<style> input[name='example']{ ... } </style> <input name="example" type="text" readonly >...</input> <input name="example" type="text">...</input> <input name="example" type="button">...</input>
値の先頭が一致
element[ attr ^= 'value' ]
値の先頭が一致する場合の属性セレクターです。
<style> input[class^='bc']{ ... } </style> <input class="abc" name="example" type="text" readonly >...</input> <input class="bcd" name="example" type="text">...</input> <input class="cde" name="example" type="button">...</input>
値の最後が一致
element[ attr $= 'value' ]
値の最後が一致する場合の属性セレクターです。
<style> input[class$='bc']{ ... } </style> <input class="abc" name="example" type="text" readonly >...</input> <input class="bcd" name="example" type="text">...</input> <input class="cde" name="example" type="button">...</input>
値に含まれる
element[ attr *= 'value' ]
値のなかに一致する部分がある場合の属性セレクターです。
<style> input[class*='b']{ ... } </style> <input class="abc" name="example" type="text" readonly >...</input> <input class="bcd" name="example" type="text">...</input> <input class="cde" name="example" type="button">...</input>
一部が一致
element[ attr ~= 'value' ]
複数の値がある場合に、そのうちの1つが一致する場合の属性セレクターです。
<style> input[class~='b']{ ... } </style> <input class="a b c" name="example" type="text" readonly >...</input> <input class="b c d" name="example" type="text">...</input> <input class="c d e" name="example" type="button">...</input>
使用言語が対象
element[ attr |= 'value' ]
言語を対象にした属性セレクターではないのですが、ハイフン-
で区切られた先の値が一致する属性が対象になります。
そのため、lang属性といった言語を対象にした場合に便利です。
<style> input[class|='en']{ ... } </style> <p class="en-us en-au">...</p> <p class="ja ja-JP">...</p>
JavaScript におけるセレクター
セレクターを利用してエレメントを取得する方法は、DOM ( JavaScript )にも使われています。 querySelector() 、querySelectorAll() メソッドはセレクターによってエレメントを取得します。
JavaScript で class 属性の値を取得するには、Element.className
です。