CSSの属性セレクタを使い分ければ、特定の要素にスタイルが適用できる

CSSの属性セレクタを使い分ければ、特定の要素にスタイルが適用できる
  • このエントリーをはてなブックマークに追加
  • 887

    follow us in feedly

こんにちは、@nakafujiです。

今回もCSSで覚えると便利なものをひとつご紹介したいと思います。

普段CSSを使う中で、リンクの<a>タグなど単純にその要素に対して設定することはよくあると思います。例えばこんな感じ。

a{
font-size: 16px;
color: #333;
}

もしくはこのように、class名を入れて他の同じ要素に対して影響が出ないように、というやり方も一般的ですね。

a.title{
font-size: 16px;
color: #333;
}

今回はちょっと変わって、CSSの属性セレクタというものを使って特定要素にスタイルを適用する方法をご紹介します。

スポンサーリンク

属性セレクタってなに?

属性セレクタというのは、属性や属性値の内容によって指定するものです。

属性ってなんですか( ;∀;)となる人のために、まずはその説明から。

要素と属性の説明

上の図はhtmlの<a>タグのサンプルです。

まずこれ全体を「要素」といいます。その中で要素名・属性名・属性値という3つに分類されます。

また属性名(ブルーのところ)と属性値(ピンクのところ)の2つを合わせて「属性」と総称されています。

<a>タグだけを書いても、「リンク先はどこ?」「同じタブで開くの?」となってしまい機能しないので、属性を使って細かい設定をすることでhtmlが成り立っているというわけです。

これは<a>タグだけに限らず、例えば画像を入れる時の

<img href="./img/123.jpg" width="100" height="30">

というのもimgという要素名とその他属性という構成です。

他にも送信ボタンを入れる時の

<input type="submit" value="送信">

というのも、inputという要素名とその他属性という構成ですね。これ以外にもまだまだたくさんありますが、htmlはこんな風に要素名と属性で成り立っています。

この「属性」を使ってCSSで細かく指定することができるのが今回説明する属性セレクタです。

サポートブラウザについて

サポートブラウザはクロスブラウザ全体問題なく使えます。

IEも9以上であればすべて対応しているので、普段使う分にも支障なさそうです。IE8とかの古いバージョン対応がある場合は注意したほうが良いと思います。

実際にどんな使い分けができるのか、色々な例を使って説明していきたいと思います!結果と並べて見やすいように、今回CSSについてはhtmlの中に記述させていただきました(<style></style>で囲んでいる箇所がCSSです)

 

E[foo] — 属性名がfooのE要素

まずは簡単なものから。これは属性値は省いて、属性名だけで指定する方法です。

特定の属性名が入っているものだけに、スタイルを指定するという属性セレクタです。

See the Pen 属性セレクタ1 by tatsuya nakafuji (@handywebdesign) on CodePen.

ここでは属性にclassを入れて「classが入っている要素にだけスタイルを指定」という設定をしました。指定通り、上にある要素のみ背景を変えることができました。

値に関係なくとりあえず指定の要素名に対して設定する時は、これを使えば十分です。

続いてここからちょっと細かい指定方法です。

E[foo=”bar”] — fooの属性名で、barの値を持つE要素

さっきの設定よりも、より具体的になりました。これは属性名だけでなく、ここからは属性値を指定していくやり方です。

=(イコール)のみで指定すると、その指定した値を持っている要素に対して指定することができます。

See the Pen 属性セレクタ2 by tatsuya nakafuji (@handywebdesign) on CodePen.

例えば上のように[tagert=”_blank”]という指定をすると、別タブで開く設定(_blank)をしている<a>タグだけに、テキスト右側にマークをつけるといったこともできます。こういうのよく見かけますよね。

やり方は色々ありますが、一例として属性セレクタを使って実装することもできます。

E[foo~=”bar”] — fooの属性名で、複数候補(スペース区切り)の中でbarと一致するE要素

=(イコール)の前に~(チルダ)をつけると、複数の値が設定されている中で指定したものが一致した場合に適用されます。

ちょっとややこしい説明ですが、よくあるのがclass名をスペースで区切って複数の値を設定している場合です。

See the Pen 属性セレクタ3 by tatsuya nakafuji (@handywebdesign) on CodePen.

上の例では複数候補(ひとつだけの値含む)でredが一致する時にスタイルが適用がされました。

ちなみにひとつ前で説明した属性セレクタのように

[class="red"]

と設定した場合、一番下のテキスト3のみ赤になります。複数候補の中に入っていても、対象にはならないんですね。

複数候補の中にも指定したものが含む場合は、~(チルダ)を入れるのを忘れないようにしましょう。

E[foo^=”bar”] — fooの属性名で、barから始まるE要素

=(イコール)の前に^(カレット)をつけると、その指定した値から始まる要素、という設定になります。

See the Pen 属性セレクタ4 by tatsuya nakafuji (@handywebdesign) on CodePen.

例では、アンカーリンクを作ってそれぞれに#jump01〜03と連番でid名をつけました。

このアンカーリンクに対してCSSで[id^=”#jump”]と指定すると、#jumpから始まる全ての要素にスタイルが設定されます。

共通した値から始まる属性に対して設定する時などに便利ですね。

E[foo$=”bar”] — fooの属性名で、barで終わるE要素

今度は逆に=(イコール)の前に$(ドル)をつけると、その指定した値で終わる要素、という設定になります。

末尾の値に応じて指定をすることができるので、例えば

See the Pen 属性セレクタ5 by tatsuya nakafuji (@handywebdesign) on CodePen.

こんな風に、拡張子に応じて設定をしたりといったことができます。あとは「末尾が01で終わるclass名だけに設定したい」といった時なども使えそうです。

E[foo*=”bar”] — fooの属性名で、barを含むE要素

=(イコール)の前に*(アスタリスク)をつけると、その指定した値を含む要素、という設定になります。含む、ということはどこに入っていても良いということです。

See the Pen 属性セレクタ6 by tatsuya nakafuji (@handywebdesign) on CodePen.

例では<a>タグのtitleに「確認」と入っている要素だけボタン背景を変更しました。

途中に入っている値を指定する時に便利ですね。

E[foo|=”bar”] — fooの属性名で、-(ハイフン)で区切った前の値がbarで始まるE要素

=(イコール)の前に|(パイプライン)をつけると、ハイフンで区切った前の値で判断されます。

少し難しい説明になったんですが例えば

<p lang="en-US">copyright handywebdesign</p>
<p class="box-01">copyright handywebdesign</p>

というように、langで言語設定をする時や、class名をハイフンで区切ったものなどに使います。

あまり使う頻度は少なめかもしれませんが、ハイフンがなくても一致すれば適用されるので

See the Pen 属性セレクタ7 by tatsuya nakafuji (@handywebdesign) on CodePen.

上の例だとlangがenの時、という設定をしました。この場合enとen-USの両方にスタイルが適用されます。jaは対象外になるので適用されてないのがわかると思います。

属性セレクタを覚えるといろいろと応用できる

というわけで、属性セレクタについての説明でした。

属性セレクタを覚えるとCSSで細かい設定ができると同時に、jQueryの要素指定にも使えるので応用がいろいろ効いてくると思います。

全体的に特殊記号で書き分けるものばかりなので、なかなか覚えづらいとは思いますが「こういう方法もあるんだ」ということを知っておくだけでも役立ちますよ。

CSSを使う上での参考になれば幸いです!

スポンサーリンク