マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

CSS WEB制作

知ってそうで知らないCSS3の便利な使い方【その2:属性セレクタ編】

投稿日:2015年2月18日 更新日:

前回構造疑似クラスについて便利な使い方をご紹介しましたが、
知ってそうで知らないCSS3の便利な使い方【その1:構造疑似クラス編】
今回はCSS3の属性セレクタをご紹介します。

E[foo]

foo属性を持つE要素に対してスタイルを適用。値は何でもOK。

サンプル

<style>
h2[title] {
color:rgba(255,0,0,1);
}
</style>

<h2>適用しない<h2>
<h2 title="適用する">適用する<h2>
<h2 title="">適用する<h2>

適用しない

適用する

適用する

E[foo=”bar”]

barという値のfoo属性を持つE要素に対してスタイルを適用

サンプル

<style>
h2[title="hoge"] {
color:rgba(255,0,0,1);
}
</style>

<h2 title="hoge">適用する<h2>
<h2 title="hogehoge">適用しない<h2>

適用する

適用しない

E[foo~=”bar”]

barという値を1つでも含んでいるfoo属性を持つE要素に対してスタイルを適用

サンプル

<style>
h2[class~="hoge"] {
color:rgba(255,0,0,1);
}
</style>

<h2 class="fuge">適用しない<h2>
<h2 class="fuge hoge">適用する<h2>
<h2 class="fuge hogehoge">適用しない<h2>

適用しない

適用する

適用しない

E[foo^=”bar”]

barという値から始まるfoo属性を持つE要素に対してスタイルを適用

サンプル

<style>
h2[class^="hoge"] {
color:rgba(255,0,0,1);
}
</style>

<h2 class="fuge">適用しない<h2>
<h2 class="hoge">適用する<h2>
<h2 class="hogehoge">適用する<h2>

適用しない

適用する

適用する

E[foo$=”bar”]

barという値で終わるfoo属性を持つE要素に対してスタイルを適用

サンプル

<style>
a[href$=".html"] {
color:rgba(255,0,0,1);
}
</style>

<p><a href="#">適用しない</a></p>
<p><a href="//www.markernet.co.jp/index.html">適用する</a></p>
<p><a href="//www.markernet.co.jp/">適用しない</a></p>

E[foo*=”bar”]

barという文字列を含むfoo属性を持つE要素に対してスタイルを適用

サンプル

<style>
a[href*="markernet.co.jp"] {
color:rgba(255,0,0,1);
}
</style>

<p><a href="#">適用しない</a></p>
<p><a href="//www.markernet.co.jp/index.html">適用する</a></p>
<p><a href="//www.markernet.co.jp/">適用する</a></p>

E[foo|=”bar”]

barの値がハイフン区切りの値をとり、barから始まるfoo属性をもつE要素に対してスタイルを適用

サンプル

<style>
a[hreflang|="en"] {
color:rgba(255,0,0,1);
}
</style>

<p><a href="#" hreflang="ja">適用しない</a></p>
<p><a href="#" hreflang="en">適用する</a></p>
<p><a href="#" hreflang="en-US">適用する</a></p>

いかがでしたか?
前回ご紹介した構造疑似クラス等と合わせて属性セレクタを使ってみてください。
より細かな指定が可能になりますね!

知ってそうで知らないCSS3の便利な使い方【その1:構造疑似クラス編】

-CSS, WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

知ってそうで知らないCSS3の便利な使い方【その3:box系プロパティ】

知ってそうで知らないCSS3の便利な使い方【その3:box系プロパティ】

今回はCSS3を使ったレイアウトで使えるbox系プロパティを使ってみました。 このbox系のプロパティを使えばCSS2等で使っていたfloatやtable-cellプロパティを使わずに横並びレイアウト …

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

サイトの設計図とも言えるワイヤーフレームを作成することは、ウェブ制作において大事なステップです。 ワイヤーフレームとはサイトの大まかなレイアウト、必要な要素、コンテンツの優先順位を示したもので、ワイヤ …

【css技術】CSSだけで生成された歴代Appleのマウスがスゴい

【css技術】CSSだけで生成された歴代Appleのマウスがスゴい

css3の普及で、画像を使わなくとも ボタンで使用する様なグラーデーションや形など、 様々な表現を実現することができるようになってきました。 こうした機能も、上手く使いこなせるようになれば こんなこと …

中国語サイトのスマートフォンサイト制作 は必要か?必須か?

中国語サイトのスマートフォンサイト制作 は必要か?必須か?

ChiKuu(チークー)という、海外で活躍するスポーツ選手や実業家、アーティストのつぶやきや最新情報などを翻訳してくれるウェブサイトに、新しい表示言語として簡体字中国語が加わりました。 ChiKuu. …

脱初心者!CSSのちょっとしたテクニック!CSSが効かない問題を回避!

脱初心者!CSSのちょっとしたテクニック!CSSが効かない問題を回避!

「CSSを設定したのに効かない!?」っていうことありますよね。 その場合、一概には言えませんが、もしかしたらCSSの書き方が原因かもしれません。 下記を参考に、CSSを書き直せば直る可能性もぐっと高ま …