CSS3 属性セレクタ 活用方法

Archives Details

CSS3 属性セレクタ活用方法

CSS3

2012.05.19

この記事は最終更新日から1年以上が経過しています。

CSS3の属性セレクタで利用できるBegins withとEnd withの機能を利用し、属性値によっての指定することが可能になります。

Begins withとは「〇〇で始まる属性」End withはその逆で「〇〇で終わる属性」となっております。

どうやって使うかというと

Begins with

（要素名）[(属性名)^=”始まりの値”]{}

End with

（要素名）[(属性名)^=”終わりの値”]{}

と記述します。

有効な使い方の一つとして「リンクの属性判別によるアイコン付与」の使用方法があります。

「http://とhttps://で始まるリンク」 → 外部リンクを表すアイコンを付与

「mailtoで始まるリンク」 → メールを表すアイコンを付与

「.pdfで終わるリンク」 → pdfファイルを表すアイコンを付与

などに使用すると便利でしょう。

以下のようなHTMLがあるとすれば、

HTML

<ul class="linkLi">
  <li><a href="https://www.webcyou.com">Web帳</a></li>
  <li><a href="http://www.google.co.jp">google</a></li>
  <li><a href="index.php">サイト内リンク</a></li>
  <li><a href="sample.pdf">PDFファイル</a></li>
  <li><a href="mailto:info@sample.com">Eメール</a></li>
</ul>

以下のようなcssでそれぞれのリンクにあったアイコンを付与することができます。

.linkLi a{
padding-left: 20px;
background: url(sp.gif) no-repeat;
}
.linkLi a[href^="http://"],
.linkLi a[href^="https://"]{
background-position: 0 -28px;
}
.linkLi a[href^="mailto"]{
background-position: 0 -53px;
}
.linkLi a[href$=".pdf"]{
background-position: 0 -77px;
}