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属性の１つが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>