【サンプル有】入門からCSS3まで!属性セレクタリファレンス

痒いところに手が届くスタイル指定!

attr-selector

前回は、classセレクタやidセレクタなど、超基本的なセレクタを紹介しました。

この記事では続編として、属性セレクタをサンプルを交えて解説。CSS2レベルの基本から、CSS3で追加されたものまでを網羅しようと思います。

属性セレクタを知っておくと、かゆいところに手が届くようなスタイル指定が可能になりますよ。

ちなみに「セレクタって何ぞや?」という方は、こちらの投稿をご参照くださいませませ。

E[att] (属性名・完全一致)

属性セレクタの中で一番基本的な形。

あるE要素(pとかaとかdivとか…)のうち、指定したatt属性(nameやclass、titleなどなど)が付いている場合にスタイルが適用されます。

E[att=”bar”] (単一属性値・完全一致)

ある要素のうち、指定した属性の値と完全一致した場合にのみスタイルが適用されます。

E[att~=”bar”] (複数属性値・少なくとも一つが完全一致)

~(チルダ)を付けた属性セレクタ。

ある要素のうち、少なくとも一つの属性の値と完全一致した場合にスタイルが適用されます。

言葉だけでは分かりにくいですが、前述 E[att=”bar”]の使用例と比較していただくと腑に落とせるかもしれません。

E[attr|=”bar”] (ハイフン区切り属性値・前方一致)

|(バーティカルバー)を付けた属性セレクタ。
ハイフンで区切られた値をもつ要素のうち、前の部分が一致する場合にスタイルが適用されます。

もともとは”en-US”のように、言語の種類を示す値を意図したセレクタですが、どんな属性値にでも使用です。

以下に例を示します。

E[att^=”bar”] (属性値・前方一致)

^(サーカムフレックス)を付けた属性セレクタ。
CSS3から追加されたものになります。

ある要素のうち、指定した属性の値と前方一致した場合に、スタイルが適用されます。

E[att$=”bar”] (属性値・後方一致)

こちらの $(ドル)を付けた属性セレクタもCSS3からです。
ある要素のうち、指定した属性の値と後方一致した場合に、スタイルが適用されます。

E[att*=”bar”] (属性値・部分一致)

こちらの *(アスタリスク)を付けた属性セレクタもCSS3から。
ある要素のうち、指定した属性の値と部分一致した場合に、スタイルが適用されます。

以上、属性セレクタの一覧を紹介しました。
次回は、疑似要素と疑似クラスを解説したいと思っています。

ちなみに、超基本的なセレクタ達については、こちらの記事(【初心者対象】超基礎的なCSSセレクタの種類一覧)で紹介しています。

人気の無料メール講座を、ご利用ください。

  • 【プロ直伝】制作前に必ず行う2つのこととは?
  • 【重要】収益サイト制作者が取るべき手段は何か?
  • 【発表】魅せるデザインのラインナップはこちらです。
  • 【無料】必ず入れておくべき、フリープラグイン8選!
  • 【一瞬】瞬時にサイトの印象を引き立てる方法。
  • 【3.5倍】こうして成約率が急上昇しました。
  • 【注意】なぜ記事を増やしてもアクセスが伸びないのか?

※下記のフォームからメール講座に ご登録いただけます。

記事をシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする
  • Google+で共有する

Tags


Trackbacks & Comments

Trackback URL for this post:

Leave a Reply