備忘録的プログラミングリファレンス

セレクター（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 属性に記述します。以下の太字部分がスタイル宣言です。

例：上記のスタイル定義をHTMLソースに直接記述する
<p class="calss_name" style="margin: 1em;padding: 1em;background-color: black;color: white;">

　スタイル宣言は、プロパティーとその値で構成します。

　セレクターにはエレメント自体や class や id といった特定エレメントを指定する方法があります。
　ページ全体に関わらないようなエレメント自体にスタイルシートを設定すると、場合によっては初期値に戻してからスタイルを指定し直すといったことが多くなりがちです。
　規模が大きくなる場合は class や id といった特定エレメントの指定を利用するようにしたほうが煩雑になり難い傾向があるように思います。

ページ内 Index

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;
}

子エレメント、孫エレメントのセレクター

　子エレメントや孫エレメントを指定することもできます。
　全ての子孫エレメントを対象にした方法と、直下の子エレメントのみを指定する方法があります。

子孫エレメントのセレクター

　子エレメントや孫エレメントは半角スペース で区切って指定します。対応する全ての子孫エレメントが対象になります。

例：子エレメントの指定。<div>以下の<p>は全て対象になる
<style>
div p{
	font-size: 16px;
}
</style>

<div>
	<p>
		...
	</p>
	<p>
			...
	</p>
</div>
例：孫エレメントの指定。<div>の<p>以下の<span>は全て対象になる
<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' ]

　複数の値がある場合に、そのうちの１つが一致する場合の属性セレクターです。

一部が一致
<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 です。