CSS3セレクターまとめ

属性セレクター#

E[att^="val"]: att属性の値がvalで始まるE要素を選択します。
E[att$="val"]: att属性の値がvalで終わるE要素を選択します。
E[att*="val"]: att属性の値にvalが含まれるE要素を選択します。

構造的擬似クラスセレクター#

:root: ルートセレクター。要素が存在するドキュメントのルート要素にマッチします。HTMLでは、ルート要素は常に<html>です。 : 否定セレクター。特定の要素以外のすべての要素を選択します。以下のコードでは、最終的にtype=buttonの要素に赤い背景が設定されます。

<style>
	input:not([type="text"]){background-color: red};
</style>
<body>
	<input type='text'>
	<input type='text'>
	<input type='button'>
</body>

: 空セレクター。内容が空の要素を選択します。空要素とは、スペースを含め、中に何も含まれていない要素のことです。 : ターゲットセレクター。ドキュメントのURLの特定の識別子に一致するターゲット要素にマッチします。以下のコードでは、各a要素にクリックイベントを追加できます。a1をクリックすると、id='a1'の要素の背景が赤色になり、他も同様です。

<style>
	#a1:target{background-color: red}
	#a2:target{background-color: blue}
	#a3:target{background-color: yellow}
</style>
<body>
	<a href="#a1">a1</a>
	<a href="#a2">a2</a>
	<a href="#a3">a3</a>
	<div id="a1">a1</div>
	<div id="a2">a2</div>
	<div id="a3">a3</div>
</body>

: 親要素の最初の子要素を選択します。例:ul li:first-childは、ul内の最初のli要素を選択します。 : 上記のセレクターとは反対に、最後の子要素を選択します。 nth-child(n): 親要素内の1つまたは複数の指定された子要素を選択します。nは、数値または式として指定できるパラメーターです。 ul内の偶数番目（2番目と4番目、nは0から数えます）のliを選択し、フォントを黄色に設定します。

li:nth-child(2n){color:yellow;}
<ul>
	<li>Hello World</li>
	<li>Hello World</li>
	<li>Hello World</li>
	<li>Hello World</li>
	<li>Hello World</li>
</ul>

nth-last-child(n): 上記のセレクターとは反対に、親要素の最後の子要素から数えて、指定された要素を選択します。 first-of-type: 親要素内の指定されたtypeの最初の要素を選択します。例:div p:first-of-typeは、div内の最初のp要素を選択します。 nth-of-type(n): nth-child(n)と同様に、親要素内の指定されたtypeの指定された位置の要素を選択します。例:div p:nth-of-type(3)は、div内の3番目のp要素を選択します。 last-of-type: first-of-typeと同様ですが、親要素内の指定されたtypeの最後の要素を選択します。 nth-last-of-type(n): nth-of-type(n)と同様ですが、親要素の後ろから数えて選択します。 only-child: div p:only-childは、複数のdivがある場合、子要素が1つしかないdiv内のp要素を選択します。最初のul内のliのみがオレンジ色になり、他のliは変わりません。

li:only-child{color: orange}
<ul>
	<li>你好</li>
</ul>
<ul>
	<li>Hello World</li>
	<li>Hello World</li>
	<li>Hello World</li>
	<li>Hello World</li>
	<li>Hello World</li>
</ul>

only-of-type: 上記と同様ですが、親要素内に指定されたtypeの要素が1つしかない子要素を選択します。

その他のセレクター#

: フォーム要素には、有効（:enabled）と無効（:disabled）の2つの状態があります。このセレクターは、有効な状態の要素を選択します。 : 上記のセレクターと同様に、無効な状態の要素を選択します。 checked: ラジオボタンとチェックボックスは、チェックされた状態とチェックされていない状態の両方を持っています。このセレクターは、チェックされた状態のボタンを選択します。 ::selection: 擬似要素で、ハイライトされたテキスト（マウスで選択されたテキスト）にマッチします。ブラウザのデフォルトでは、ウェブページのテキストをマウスで選択すると、「青い背景、白いフォント」で表示されます。::selection{color:black;}とすることで、選択されたテキストの色を黒に変更できます。 read-only: 読み取り専用状態の要素を選択します。これは、"readonly='readonly'"が設定されている要素（HTML5ではreadonly属性が直接設定されている要素）です。 read-write: read-onlyとは反対に、読み書き可能な状態の要素を選択します。 ::before: 要素の前にコンテンツを挿入するために使用します。 ::after: 要素の後にコンテンツを挿入します。

属性セレクター#

構造的擬似クラスセレクター#

その他のセレクター#

其他语言