ファイルタイプを対象としたCSS3属性セレクタ
の 属性セレクタ 余分なものを追加せずに要素を選択するための本当に便利な機能です。 id または クラス. ターゲット要素が次のような属性を持つ限り href, src そして タイプ そうする必要はない.
属性セレクタは実際には周りにありました CSS 2.1以降, そして今、CSS3仕様に追加されたいくつかのタイプの属性セレクターを使って、要素の属性をより具体的にターゲットにすることができます。.
そして、この記事では、構文を選択するために構文の1つを使用します。 ファイルの種類 それは属性の値の一部として挿入されます.
構文とブラウザのサポート
の ファイルの種類 常にファイル名の末尾にあります。だから、それを選択する ファイルの種類 次の構文を使うことができます [attr $ = "value"]. この構文は $ = 属性値の末尾をターゲットとする演算子です。次に例を示します。
a [href $ = "。pdf"]：background：url（ '…/images/document-pdf-text.png'）の前に繰り返しなし;
上記のスニペットは、属性値が終わるすべてのリンクを選択します。 .pdf にword-document-iconを挿入します。 ：前 疑似要素.
PDFアイコンソース： フーガアイコン
これはこのセレクターの一般的な利用法ですが、それ以上のことは確かに可能です。.
ブラウザの互換性についてこの構文は正式にCSS3仕様として導入されていますが、実際にはそれ以降サポートされています。 Internet Explorer 7, だからあなたは安全にあなたのすべてのデザインを通してそれを適用することができます.
例
あなたが試したことがない場合は、決してわかりません. まだわからないことをもっとよく理解するためには、新しいことを試すだけでいいのです。そこで、ここでは、このシンタックスが、普通のCSSだけを使用して適用するのがやや困難であった特定のHTML構造内の要素をターゲットとするのに非常に有用で便利な方法を説明します。.
以下に、 HTML5の構造 キャプション付きの3つの画像を一覧表示します。それはデモ目的のためだけです、あなたのマークアップは正確に次のスニペットのようなものである必要はありません（例えば、あなたはただ1つの画像またはさらに3つの画像さえ持っているかもしれません）特定のHTML構造.
-
jpg -
PNG -
GIF
上記の各画像には、次の形式または拡張子があります。, jpg, PNG, そして GIF. また、画像の拡張子を表すキャプションもあります。このキャプションは画像ラベルとして機能します.
だから、ここで計画は、私たちはそれぞれの異なる画像拡張子のキャプションに異なる背景色を与えるつもりです。 JPG画像は 緑 キャプションの色、PNGは 青, そして最後にGIFが得られます 紫の.
最初に、figureタグの位置を相対的に設定しましょう。 絶対の キャプションの位置.
図位置：相対;
境界線と影付きの画像に小さな装飾を追加する.
img border：5px solid #ccc; -webkit-box-shadow：1px 1px 3px 0px rgba（0、0、0、.5）。ボックスシャドウ：1px 1px 3px 0px rgba（0、0、0、0.5）。
そして、キャプションのデフォルトのスタイルと位置を設定します。画像のキャプションまたはラベルは50ピクセル四方になります.
img + figcaption color：#fff;位置：絶対トップ：0。右：0;幅：50ピクセル。高さ：50ピクセル。行の高さ：50ピクセル。 text-align：center。
今度は背景色を追加します。そうするために、属性セレクタと隣接する兄弟セレクタを組み合わせることができます。, +.
img [src $ = "。jpg"] + figcaption 背景色：＃a8b700;
上記のスニペットは、source属性がで終わるすべての画像をターゲットにします。 .jpg, それから隣接するセレクタはその隣の要素を見つけます。この場合 figcaption と追加されます ＃a8b700 背景色.
そして、これが残りの画像フォーマット、.pngと.gifのためのすべてのコードです。.
img [src $ = "。png"] + figcaption 背景色：＃389abe; img [src $ = "。gif"] + figcaption 背景色：＃8960a7;
それでは、下のデモリンクから実際にどのように動作するのかを見てみましょう。そうでなければ、オフラインで調べるためにソースをダウンロードすることができます。.
- デモ
- ソースをダウンロード
画像ソースは以下の通りです：MacPro 1、MacPro 2、およびMacPro 3
結論
属性セレクタを使用して上記で実証したもののように、特別なセレクタを使用してスタイルの優雅な側面を確認できることを願っています。そのため、次回HTMLのスタイルを設定するときには、特別なセレクタを使用してスタイルを適用できるかどうかについて、余計なものを追加することなく適切に調査することを強くお勧めします。 クラス または id.
次の記事でカバーするこのタイプの新しいセレクターが実際にはもう2つあります。.
