【CSS】inputタグやaタグの後ろにつくカッコは何を意味しているのか?属性による絞り込みを実例で解説

css-attribute-selectorCSS・SCSS

CSSのセレクタの指定方法は様々だがたまに、要素の後ろにカッコ [] がつくセレクタを目にすることがある。

例: input[type=text]、a[target]、a[target=blank]、a[href*=”example”]など。

中には1単語のみ入る場合と、イコールでつないで2単語入るばあいがある。この指定方法の意味や役割について実例で解説。

属性の指定

いきなり結論から入るが、これは属性を指定するもの。正式には属性セレクターと呼ぶ。

属性名で指定したり、属性名と値で絞り込んだり、更にはパターンマッチングも可能と、意外と多機能。

属性とは?

属性とは、タグに対して付与する追加オプションや絞りこみのようなもの。属性は様々なものが用意されていて、タグごとに使えるものが異なる。

有名どころだと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>


(参考) MDN Wev Docs カスタムデータ属性

セレクタのカッコの使い方

実際に属性セレクターを使って指定した要素のみ色を変えてみる。

例1:属性名で指定する

以下のような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>
data-order1
data-orde2
data-originalxxx
data-customyyy

divタグが4つあるが、スタイルが適用されるのは、data-customがついているもののみ。

例2:属性名と値を指定する

以下のような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-order1
data-orde2
data-originalxxx
data-customyyy

data-order属性がついているタグは2つあるが、その中でも、値が2のタグにのみスタイルが適用されている。

例3:値のパターンを指定する

属性セレクターは、ターゲット名の後ろに指定の記号を記述することで、パターンとマッチしたものにスタイルを適用することができる。

要素[属性名<パターン記号>="値"]

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の略

詳細は以下リンクをご参照。

(参考)MDN Wev Docs 属性セレクター

タイトルとURLをコピーしました