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

セレクター(selecter)

 セレクター(selecter)は、HTML タグエレメントを指定す方法で、CSSの基本となる記述方法です。 CSS や <style> エレメント内で、セレクターによって HTML タグエレメントを指定しスタイル定義を設定します。

 セレクターには多くの種類があります。詳しくはセレクターの種類を参照してください。

セレクターによる<p class="calss_name">の指定とそのスタイル定義
<style>
p.calss_name {				/* selecter */
	margin: 1em;			/* property & property value */
	padding: 1em;
	background-color: black;
	color: white;
}
</style>

<p class="calss_name">...</p>

 p.calss_nameはセレクターと呼ばれ、任意のタグエレメントの指定をします。 上記の場合は<p class="class_name">エレメントを指定しています。
 このセレクターの後 { と } で囲まれたのがタグエレメントのスタイル宣言です。

 HTMLソースにスタイル定義を直接宣言することもできます。目的のタグエレメントにstyle属性に記述します。以下の太字部分がスタイル宣言です。

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

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

class属性とセレクター

 基本的には、HTMLソースにあるタグエレメントにはclass属性を付加してセレクターと合わせます。

例:class属性とセレクター
<style>
.example{
	...
}
</style>

<p class="example">...</p>

 class属性は複数のセレクターを指定することができます。詳しくはHTMLからの複数のクラス名指定を参照してください。

JavaScript

 セレクターを利用してエレメントを取得する方法は、DOM ( JavaScript )にも使われています。 querySelector()querySelectorAll() メソッドはセレクターによってエレメントを取得します。

セレクターの種類

 class指定以外にもエレメントを指定する方法は以下のようにあります。
 セレクターは組み合わせて使うこともできますし、複数指定することもできます。

selecter name指定方法例指定対象
エレメントセレクタp、tableなどタグ名タグエレメントを指定。例えば、aを指定すれば、全ての<a>が対象になる。
クラスセレクタ.classclass="クラス名"を持ったタグエレメント
IDセレクタ#idid="ID名"を持ったタグエレメント
属性セレクタ[type="example"]タグエレメントの属性名(attribute)と値。name属性はこのセレクタを使う
全称セレクタ*全てが対象に。上記と組み合わせが可能
子孫エレメントセレクタelement child grandChild子エレメント、孫エレメントの指定
隣接エレメントセレクタinput + label、input ~ label直後にある兄弟エレメントを指定
擬似クラスセレクタ:hoverタグエレメントに何らかの動きがあればという宣言になる

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' ]

 複数の値がある場合に、そのうちの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>