CSSのセレクタの指定方法は様々だがたまに、要素の後ろにカッコ [] がつくセレクタを目にすることがある。
例： input[type=text]、a[target]、a[target=blank]、a[href*=”example”]など。
中には１単語のみ入る場合と、イコールでつないで２単語入るばあいがある。この指定方法の意味や役割について実例で解説。
属性の指定
いきなり結論から入るが、これは属性を指定するもの。正式には属性セレクターと呼ぶ。
属性名で指定したり、属性名と値で絞り込んだり、更にはパターンマッチングも可能と、意外と多機能。
属性とは？
属性とは、タグに対して付与する追加オプションや絞りこみのようなもの。属性は様々なものが用意されていて、タグごとに使えるものが異なる。
有名どころだとinputタグのtype属性や、aタグのhref属性やtarget属性がある。type属性は設定した値により入力欄の性質を変更することができる。targetはリンクをクリックしたあとの挙動を変更する。
例：inputタグのtype属性
inputタグでよく見かけるtype属性の値は、text, button, submitあたりだが、実はかなり多くの機能を提供している。
予約システムで、カレンダーから日付を選択したり、メールアドレスの入力欄に@をつけない文字を入力するとエラーになったりなども、属性で指定できる。
<input type="text"><br>
<input type="button" value="ボタン"><br>
<input type="color" value="#ffff00"><br>
<input type="date"><br>
<input type="email" pattern=".+@globex.com" size="10" required><br>
<input type="file" accept="image/png, image/jpeg"><br>
<input type="search"><br>
<input type="time" min="09:00" max="18:00" required><br>
<input type="week" min="2021-W18" max="2021-W26" required><br>
<input type="checkbox">チェックボックス<br>チェックボックス
（参考）MDN Wev Docs <input>: 入力欄 (フォーム入力) 要素
例：aタグのtarget属性
aタグのtarget属性は、見た目は同じだがクリック後の挙動を変えることができる。
| 属性 | 内容 |
| _self: | 現在の閲覧中タブ内で遷移する。 (既定値) |
| _blank: | 別のタブで開く。 |
| _parent: | 親の閲覧タブ。親がない場合は、 _self と同じ振る舞いになる。 |
| _top: | 最上位の閲覧タブ。親がない場合は、 _self と同じ振る舞いになる。 |
<ul>
<li><a href="https://example.com" target="_blank">https://example.com</a></li>
<li><a href="https://example.net" target="_self">https://example.net</a></li>
<li><a href="https://example.site" target="_parent">https://example.site</a></li>
<li><a href="https://example.jp" target="_top">https://example.jp</a></li>
</ul>
※target=”_blank”を使う場合は、安全性のため「rel=”noopener”」または「rel=”noopener noreferrer”」属性もつける。
カスタム属性
「data-xxx」という形で、自分の好きな属性名を付与することもできる。カスタム属性の値をjavascriptで動的に変更して、適用するスタイルを変更する場合などに使う。
<div data-order="1">test</div>
<div data-order="2">test</div>
<div data-original="xxx">test</div>
<div data-custom="yyy">test</div>セレクタのカッコの使い方
実際に属性セレクターを使って指定した要素のみ色を変えてみる。
例１：属性名で指定する
以下のようなHTMLに対して、セレクタを div[data-custom] とすると、指定した要素のみにスタイルが適用される。
<div data-order="1">data-order1</div>
<div data-order="2">data-orde2</div>
<div data-original="xxx">data-originalxxx</div>
<div data-custom="yyy">data-customyyy</div>
<style type="text/css" scoped>
div[data-custom]{
color: red;
}
</style>divタグが４つあるが、スタイルが適用されるのは、data-customがついているもののみ。
例２：属性名と値を指定する
以下のようなHTMLに対して、セレクタを div[data-order=”2″] とすると、指定した属性で、かつ、指定した値をもつ要素のみに絞り込みをして、スタイルを適用することができる。
<div data-order="1">data-order1</div>
<div data-order="2">data-orde2</div>
<div data-original="xxx">data-originalxxx</div>
<div data-custom="yyy">data-customyyy</div>
<style type="text/css" scoped>
div[data-order="2"]{
color: red;
}
</style>data-order属性がついているタグは２つあるが、その中でも、値が２のタグにのみスタイルが適用されている。
例３：値のパターンを指定する
属性セレクターは、ターゲット名の後ろに指定の記号を記述することで、パターンとマッチしたものにスタイルを適用することができる。
要素[属性名<パターン記号>="値"]aタグのhrefで指定するURLを例に解説する。
「^」冒頭が一致する要素
「^」（キャレット）を使うと、指定した値を冒頭に含むものにスタイルが適用される。
a[href^=https] とすれば、冒頭がhttpsで始まるものにスタイルが適用される。httpには適用されない。
<ul>
<li><a href="http://example.com" >http://example.com</a></li>
<li><a href="https://example.site" >https://example.site</a></li>
<li><a href="http://test.com" >http://test.com</a></li>
<li><a href="https://test.site" >https://test.site</a></li>
</ul>
<style type="text/css" scoped>
a[href^=https]{
color: red;
}
</style>
「$」末尾が一致する要素
「$」を使うと、指定した内容で値が終わる要素にスタイルが適用される。
a[href$=com] とすれば、末尾がcomで始まるものにスタイルが適用される。
<ul>
<li><a href="http://example.com" >http://example.com</a></li>
<li><a href="https://example.site" >https://example.site</a></li>
<li><a href="http://test.com" >http://test.com</a></li>
<li><a href="https://test.site" >https://test.site</a></li>
</ul>
<style type="text/css" scoped>
a[href$=com]{
color: red;
}
</style>「*」指定した値を含む要素
「*」を使うと、指定した内容を含む要素にスタイルが適用される。
a[href*=ple] とすれば、値に「ple」を含む要素にスタイルが適用される。
<ul>
<li><a href="http://example.com" >http://example.com</a></li>
<li><a href="https://example.site" >https://example.site</a></li>
<li><a href="http://test.com" >http://test.com</a></li>
<li><a href="https://test.site" >https://test.site</a></li>
</ul>
<style type="text/css" scoped>
a[href*=ple]{
color: red;
}
</style>
パターンの指定は他にも、末尾に「s」をつけると、大文字と小文字を区別する。末尾に「i」をつけると大文字と小文字を区別しないなどがある。
- sはsensitiveの略
- iはinsensitiveの略
詳細は以下リンクをご参照。
