E[attr]【属性セレクタ (存在)】
E[attr="value"]【属性セレクタ (完全一致)】
E[attr^="value"]【属性セレクタ (先頭一致)】
E[attr$="value"]【属性セレクタ (末尾一致)】
E[attr*="value"]【属性セレクタ (部分一致)】
E[attr~="value"]【属性セレクタ (リスト項目一致)】
E[attr|="value"]【属性セレクタ (プリフィックス)】

メモ

  • 各種属性を指定する属性セレクタ

構文

構文説明
E[attr]                 { 【スタイル定義】 } 属性セレクタ (存在)attr属性を持つE要素に適用
E[attr="value"]   { 【スタイル定義】 } 属性セレクタ (完全一致)attr属性がvalueのE要素に適用
E[attr^="value"] { 【スタイル定義】 }   属性セレクタ (先頭一致)attr属性がvalueで始まるE要素に適用
E[attr$="value"] { 【スタイル定義】 }   属性セレクタ (末尾一致)attr属性がvalueで終わるE要素に適用
E[attr*="value"] { 【スタイル定義】 }   属性セレクタ (部分一致)attr属性がvalueを含むE要素に適用
E[attr~="value"] { 【スタイル定義】 } 属性セレクタ (リスト項目一致)attr属性の1つがvalueのE要素に適用
E[attr|="value"] { 【スタイル定義】 } 属性セレクタ (プリフィックス)ハイフンで区切られたattr属性がvalueで始まるE要素に適用

【属性セレクタ (存在)】
<style>
#id1 input[disabled] { color:red; border:2px red dashed; }
</style>

<div id="id1">
  <p><input id="inputA" name="Start" value="123" class="classA classB">
    &lt;input id="inputA" name="Start" value="123" class="classA classB"&gt;</p>
  <p><input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja">
    &lt;input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja"&gt;</p>
  <p><input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled>
    &lt;input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled&gt;</p>
  <p><input id="inputD" name="Middle" value="123" class="classD classE" lang="en">
    &lt;input id="inputD" name="Middle" value="123" class="classD classE" lang="en"&gt;</p>
  <p><input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US">
    &lt;input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US"&gt;</p>
  <p><input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled>
    &lt;input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled&gt;</p>
</div>

<input id="inputA" name="Start" value="123" class="classA classB">

<input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja">

<input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled>

<input id="inputD" name="Middle" value="123" class="classD classE" lang="en">

<input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US">

<input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled>

【属性セレクタ (完全一致)】
<style>
#id2 input[value="456"] { color:red; border:2px red dashed; }
</style>

<div id="id2">
  <p><input id="inputA" name="Start" value="123" class="classA classB">
    &lt;input id="inputA" name="Start" value="123" class="classA classB"&gt;</p>
  <p><input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja">
    &lt;input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja"&gt;</p>
  <p><input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled>
    &lt;input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled&gt;</p>
  <p><input id="inputD" name="Middle" value="123" class="classD classE" lang="en">
    &lt;input id="inputD" name="Middle" value="123" class="classD classE" lang="en"&gt;</p>
  <p><input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US">
    &lt;input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US"&gt;</p>
  <p><input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled>
    &lt;input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled&gt;</p>
</div>

<input id="inputA" name="Start" value="123" class="classA classB">

<input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja">

<input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled>

<input id="inputD" name="Middle" value="123" class="classD classE" lang="en">

<input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US">

<input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled>

【属性セレクタ (先頭一致)】
<style>
#id3 input[name^="Start"] { color:red; border:2px red dashed; }
</style>

<div id="id3">
  <p><input id="inputA" name="Start" value="123" class="classA classB">
    &lt;input id="inputA" name="Start" value="123" class="classA classB"&gt;</p>
  <p><input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja">
    &lt;input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja"&gt;</p>
  <p><input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled>
    &lt;input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled&gt;</p>
  <p><input id="inputD" name="Middle" value="123" class="classD classE" lang="en">
    &lt;input id="inputD" name="Middle" value="123" class="classD classE" lang="en"&gt;</p>
  <p><input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US">
    &lt;input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US"&gt;</p>
  <p><input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled>
    &lt;input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled&gt;</p>
</div>

<input id="inputA" name="Start" value="123" class="classA classB">

<input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja">

<input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled>

<input id="inputD" name="Middle" value="123" class="classD classE" lang="en">

<input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US">

<input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled>

【属性セレクタ (末尾一致)】
<style>
#id4 input[name$="End"] { color:red; border:2px red dashed; }
</style>

<div id="id4">
  <p><input id="inputA" name="Start" value="123" class="classA classB">
    &lt;input id="inputA" name="Start" value="123" class="classA classB"&gt;</p>
  <p><input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja">
    &lt;input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja"&gt;</p>
  <p><input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled>
    &lt;input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled&gt;</p>
  <p><input id="inputD" name="Middle" value="123" class="classD classE" lang="en">
    &lt;input id="inputD" name="Middle" value="123" class="classD classE" lang="en"&gt;</p>
  <p><input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US">
    &lt;input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US"&gt;</p>
  <p><input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled>
    &lt;input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled&gt;</p>
</div>

<input id="inputA" name="Start" value="123" class="classA classB">

<input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja">

<input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled>

<input id="inputD" name="Middle" value="123" class="classD classE" lang="en">

<input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US">

<input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled>

【属性セレクタ (部分一致)】
<style>
#id5 input[name*="Middle"] { color:red; border:2px red dashed; }
</style>

<div id="id5">
  <p><input id="inputA" name="Start" value="123" class="classA classB">
    &lt;input id="inputA" name="Start" value="123" class="classA classB"&gt;</p>
  <p><input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja">
    &lt;input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja"&gt;</p>
  <p><input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled>
    &lt;input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled&gt;</p>
  <p><input id="inputD" name="Middle" value="123" class="classD classE" lang="en">
    &lt;input id="inputD" name="Middle" value="123" class="classD classE" lang="en"&gt;</p>
  <p><input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US">
    &lt;input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US"&gt;</p>
  <p><input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled>
    &lt;input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled&gt;</p>
</div>

<input id="inputA" name="Start" value="123" class="classA classB">

<input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja">

<input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled>

<input id="inputD" name="Middle" value="123" class="classD classE" lang="en">

<input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US">

<input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled>

【属性セレクタ (リスト項目一致)】
<style>
#id6 input[class~="classD"] { color:red; border:2px red dashed; }
</style>

<div id="id6">
  <p><input id="inputA" name="Start" value="123" class="classA classB">
    &lt;input id="inputA" name="Start" value="123" class="classA classB"&gt;</p>
  <p><input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja">
    &lt;input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja"&gt;</p>
  <p><input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled>
    &lt;input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled&gt;</p>
  <p><input id="inputD" name="Middle" value="123" class="classD classE" lang="en">
    &lt;input id="inputD" name="Middle" value="123" class="classD classE" lang="en"&gt;</p>
  <p><input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US">
    &lt;input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US"&gt;</p>
  <p><input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled>
    &lt;input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled&gt;</p>
</div>

<input id="inputA" name="Start" value="123" class="classA classB">

<input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja">

<input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled>

<input id="inputD" name="Middle" value="123" class="classD classE" lang="en">

<input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US">

<input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled>

【属性セレクタ (プリフィックス)】
<style>
#id7 input[lang|=en] { color:red; border:2px red dashed; }
</style>

<div id="id7">
  <p><input id="inputA" name="Start" value="123" class="classA classB">
    &lt;input id="inputA" name="Start" value="123" class="classA classB"&gt;</p>
  <p><input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja">
    &lt;input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja"&gt;</p>
  <p><input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled>
    &lt;input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled&gt;</p>
  <p><input id="inputD" name="Middle" value="123" class="classD classE" lang="en">
    &lt;input id="inputD" name="Middle" value="123" class="classD classE" lang="en"&gt;</p>
  <p><input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US">
    &lt;input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US"&gt;</p>
  <p><input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled>
    &lt;input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled&gt;</p>
</div>

<input id="inputA" name="Start" value="123" class="classA classB">

<input id="inputB" name="StartMiddle" value="456" class="classB classC" lang="ja">

<input id="inputC" name="StartMiddleEnd" value="789" class="classC classD" lang="ja-JP" disabled>

<input id="inputD" name="Middle" value="123" class="classD classE" lang="en">

<input id="inputE" name="MiddleEnd" value="456" class="classE classF" lang="en-US">

<input id="inputF" name="End" value="789" class="classF classG" lang="en-UK" disabled>

関連