属性セレクター
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>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要素を選択します。
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つの状態があります。このセレクターは、有効な状態の要素を選択します。
::selection{color:black;}とすることで、選択されたテキストの色を黒に変更できます。
read-only: 読み取り専用状態の要素を選択します。これは、"readonly='readonly'"が設定されている要素（HTML5ではreadonly属性が直接設定されている要素）です。
read-write: read-onlyとは反対に、読み書き可能な状態の要素を選択します。
::before: 要素の前にコンテンツを挿入するために使用します。
::after: 要素の後にコンテンツを挿入します。
この記事は 2015年1月22日 に公開され、2015年1月22日 に最終更新されました。3910 日が経過しており、内容が古くなっている可能性があります。